問題描述

我正在嘗試使用為 Multiple Select 選擇的插件構建我的下拉菜單.這是我基于的行為:

Im trying to build my dropdown menu using the plugin Chosen for Multiple Select . Here's to behavior I'm based on:

http://jsfiddle.net/JfLvA/

所以，而不是 3 硬編碼 <選項 > 在我的選擇中.我希望這個列表是由 ajax 請求填充的 json 數組的值.這將由自動完成觸發.

So, instead of having 3 harcoded < option > in my select. I want this list to be the values of a json array populated by an ajax request. This will be triggered by autocomplete.

所以，如果用戶鍵入汽車"，我會通過 ajax 調用發送這封信，然后我會返回一個這樣的數組:

So, if the user type "car", im sending the letter via an ajax call, and im getting back an array like that:

[{"id":"2489","name":"carrie"},{"id":"2490","name":"Caroline"},{"id":"2491","name":"Carole"}]

[{"id":"2489","name":"carrie"},{"id":"2490","name":"Caroline"},{"id":"2491","name":"Carole"}]

代碼:

$(function() {

$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});

$('.chzn-choices input').autocomplete({
   source: function( request, response ) {
      $.ajax({
          url: "/change/name/autocomplete/"+request.term+"/",
          dataType: "json",
          success: function( data ) {
             response( $.map( data, function( item ) {
                $('ul.chzn-results').append('<li class="active-result">' + item.name + '</li>');

          }
       });
    }
});

結果:

我在下拉列表中輸入汽車"，然后得到汽車沒有結果"，然后我就得到了所有結果，如我所愿.

I type "car", in the dropdown Im getting "No result for car" and then I have all my results, as I want.

1.為什么我會收到無結果"消息，因為我可以在我的 json 數組和列表中看到我正在獲得結果.

 -----------------------------

當我刪除car"并輸入sam"時.sam"的結果顯示在car"結果之后.(基本上，我看到了兩者的結果，而不僅僅是我當前搜索的結果)

When I delete "car" and enter "sam". The results for "sam" are showing after the "car" results. (Basically, I see the result for both, instead of just having the result of my current search)

<強>2.我想清除 keyUp 上的 ul 嗎?以為插件已經這樣做了

 -----------------------------

當我單擊一個名稱以實際選擇它并將其添加到選擇中時，我在 selected.js 文件中收到一個 javascript 錯誤

When I click on a name to actually select it and add it into the select, Im getting a javascript error inside the chosen.js file

項目未定義
item.selected =真；"第732行

item is undefined
"item.selected = true;" line 732

插件鏈接:http://harvesthq.github.com/chosen/chosen/chosen.jquery.js

它沒有在選擇中添加任何內容.

and it's not adding anything inside the select.

3.不知道為什么會這樣

 -----------------------------

你們知道我做錯了什么嗎?我完全被困在這里......！

Do you guys have any idea on what I'm I doing something wrong? I'm completly stuck here...!

哦，順便說一句，我不介意更改插件源，因為它是我唯一使用它的地方......

Oh and by the way, I dont mind changing the plugin source, as it's the only place where I'm using it....

推薦答案

試試這個:

$('.chzn-choices input').autocomplete({
  source: function( request, response ) {
    $.ajax({
      url: "/change/name/autocomplete/"+request.term+"/",
      dataType: "json",
      beforeSend: function(){$('ul.chzn-results').empty();},
      success: function( data ) {
        response( $.map( data, function( item ) {
          $('ul.chzn-results').append('<li class="active-result">' + item.name + '</li>');
        }));
      }
    });
  }
});

這篇關于Jquery Chosen 插件 - 通過 Ajax 動態填充列表的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！