JQuery的select插件 – dynamic填充Ajax列表

我试图build立我的下拉菜单使用插件select多个select 。 这是我基于的行为：

http://jsfiddle.net/JfLvA/

所以，而不是在我的select3 harcoded <option>。 我希望这个列表是一个json数组填充ajax请求的值。 这将由自动完成触发。

所以，如果用户input“car”，那么通过ajax调用发送这个字母，然后回到一个这样的数组：

[{ “ID”： “2489”， “名称”： “卡丽”}，{ “ID”： “2490”， “名称”： “卡罗琳”}，{ “ID”： “2491”， “姓名”： “卡罗尔”}]

代码：

$(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>'); } }); } }); 

结果：

我input“车”，在下拉我得到“没有结果的车”，然后我所有的结果，我想要的。

1.为什么我得到“无结果”的消息，因为我可以看到我的JSON数组和我的列表里面，我得到的结果。

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

当我删除“汽车”，并input“山姆”。 “山姆”的结果显示在“汽车”结果之后。 （基本上，我看到了两者的结果，而不仅仅是我目前的search结果）

2.我想在keyUp上清除ul 以为插件已经这样做了

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

当我点击一个名称来实际select它并将其添加到select，我得到一个JavaScript错误的choose.js文件内

项目是未定义的
“item.selected = true;” 732行

链接到插件： http : //harvesthq.github.com/chosen/chosen/chosen.jquery.js

而且它不会在select内添加任何内容。

3.不知道为什么发生这种情况

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

你们有什么想法，我是我做错了什么？ 我完全卡在这里…！

哦，顺便说一下，我不介意改变插件源，因为它是我使用它的唯一地方….

Answer 1

尝试这个：

 $('.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>'); })); } }); } }); 

Answer 2

您可以使用优秀的Select2插件通过AJAXdynamic填充列表。 从我的答案“有没有一种方法来dynamicAjax通过jQueryselect插件添加元素？ ：

看看整洁的Select2插件，它基于select自身并支持远程数据源（又名AJAX数据）和无限滚动 。

Answer 3

Ashirvad的答案不再有效。 请注意类名更改并使用选项元素而不是li元素。 我更新了我的答案，不使用弃用的“成功”事件，而是select.done（）：

 $('.chosen-search input').autocomplete({ minLength: 3, source: function( request, response ) { $.ajax({ url: "/some/autocomplete/url/"+request.term, dataType: "json", beforeSend: function(){ $('ul.chosen-results').empty(); $("#CHOSEN_INPUT_FIELDID").empty(); } }).done(function( data ) { response( $.map( data, function( item ) { $('#CHOSEN_INPUT_FIELDID').append('<option value="blah">' + item.name + '</option>'); })); $("#CHOSEN_INPUT_FIELDID").trigger("chosen:updated"); }); } }); 

Answer 4

这可能会有所帮助。 你必须触发一个事件。

 $("#DropDownID").trigger("liszt:updated"); 

其中“DropDownID”是ID的ID。

更多信息在。 http://harvesthq.github.com/chosen/

Answer 5

在DOM中的OPTION元素发生变化时，Chosen插件不会自动更新其选项列表。 你必须发送一个事件来触发更新：

Pre $('.chzn-select').trigger("liszt:updated"); 1.0： $('.chzn-select').trigger("liszt:updated");

select1.0 $('.chosen-select').trigger("chosen:updated");

如果您要dynamicpipe理OPTION元素，那么只要OPTION改变，您就必须执行此操作。 你这样做的方式会有所不同 – 在AngularJS中，尝试这样的事情：

 $scope.$watch( function() { return element.find('option').map(function() { return this.value }).get().join(); }, function() { element.trigger('liszt:updated'); } } 

Answer 6

所选的答案已经过时，同样也适用于融合/ ajaxselect的插件。

随着Select2插件得到了许多错误，这是我无法解决它。

这里是我对这个问题的回答。

用户types后，我将解决scheme与function触发器集成在一 感谢这个答案： https ： //stackoverflow.com/a/5926782/4319179 。

 //setup before functions var typingTimer; //timer identifier var doneTypingInterval = 2000; //time in ms (2 seconds) var selectID = 'YourSelectId'; //Hold select id var selectData = []; // data for unique id array //on keyup, start the countdown $('#' + selectID + '_chosen .chosen-choices input').keyup(function(){ // Change No Result Match text to Searching. $('#' + selectID + '_chosen .no-results').html('Searching = "'+ $('#' + selectID + '_chosen .chosen-choices input').val() + '"'); clearTimeout(typingTimer); //Refresh Timer on keyup if ($('#' + selectID + '_chosen .chosen-choices input').val()) { typingTimer = setTimeout(doneTyping, doneTypingInterval); //Set timer back if got value on input } }); //user is "finished typing," do something function doneTyping () { var inputData = $('#' + selectID + '_chosen .chosen-choices input').val(); //get input data $.ajax({ url: "YourUrl", data: {data: inputData}, type:'POST', dataType: "json", beforeSend: function(){ // Change No Result Match to Getting Data beforesend $('#' + selectID + '_chosen .no-results').html('Getting Data = "'+$('#' + selectID + '_chosen .chosen-choices input').val()+'"'); }, success: function( data ) { // iterate data before append $.map( data, function( item ) { // matching data eg: by id or something unique; if data match: <option> not append - else: append <option> // This will prevent from select the same thing twice. if($.inArray(item.attr_hash,selectData) == -1){ // if not match then append in select $('#' + selectID ).append('<option id="'+item.id+'" data-id = "'+item.id+'">' + item.data + '</option>'); } }); // Update chosen again after append <option> $('#' + selectID ).trigger("chosen:updated"); } }); } // Chosen event listen on input change eg: after select data / deselect this function will be trigger $('#' + selectID ).on('change', function() { // get select jquery object var domArray = $('#' + selectID ).find('option:selected'); // empty array data selectData = []; for (var i = 0, length = domArray.length; i < length; i++ ){ // Push unique data to array (for matching purpose) selectData.push( $(domArray[i]).data('id') ); } // Replace select <option> to only selected option $('#' + selectID ).html(domArray); // Update chosen again after replace selected <option> $('#' + selectID ).trigger("chosen:updated"); }); 

Answer 7

就像Vicky所build议的那样，Select2具有内置的AJAXfunction，看起来像一个很棒的插件。

如果你不想从select切换，请尝试AJAX – selecthttps://github.com/meltingice/ajax-chosen

Answer 8

select的API已经改变了很多。

如果解决scheme不适用于你，你可以试试这个： https : //github.com/goFrendiAsgard/gofrendi.chosen.ajaxify

这是function：

 // USAGE: // $('#some_input_id').chosen(); // chosen_ajaxify('some_input_id', 'http://some_url.com/contain/'); // REQUEST WILL BE SENT TO THIS URL: http://some_url.com/contain/some_term // AND THE EXPECTED RESULT (WHICH IS GOING TO BE POPULATED IN CHOSEN) IS IN JSON FORMAT // CONTAINING AN ARRAY WHICH EACH ELEMENT HAS "value" AND "caption" KEY. EX: // [{"value":"1", "caption":"Go Frendi Gunawan"}, {"value":"2", "caption":"Kira Yamato"}] function chosen_ajaxify(id, ajax_url){ console.log($('.chosen-search input').autocomplete); $('div#' + id + '_chosen .chosen-search input').keyup(function(){ var keyword = $(this).val(); var keyword_pattern = new RegExp(keyword, 'gi'); $('div#' + id + '_chosen ul.chosen-results').empty(); $("#"+id).empty(); $.ajax({ url: ajax_url + keyword, dataType: "json", success: function(response){ // map, just as in functional programming :). Other way to say "foreach" $.map(response, function(item){ $('#'+id).append('<option value="' + item.value + '">' + item.caption + '</option>'); }); $("#"+id).trigger("chosen:updated"); $('div#' + id + '_chosen').removeClass('chosen-container-single-nosearch'); $('div#' + id + '_chosen .chosen-search input').val(keyword); $('div#' + id + '_chosen .chosen-search input').removeAttr('readonly'); $('div#' + id + '_chosen .chosen-search input').focus(); // put that underscores $('div#' + id + '_chosen .active-result').each(function(){ var html = $(this).html(); $(this).html(html.replace(keyword_pattern, function(matched){ return '<em>' + matched + '</em>'; })); }); } }); }); } 

这是你的HTML：

 <select id="ajax_select"></select> 

这里是你的javasscript：

 // This is also how you usually use chosen $('#ajax_select').chosen({allow_single_deselect:true, width:"200px", search_contains: true}); // And this one is how you add AJAX capability chosen_ajaxify('ajax_select', 'server.php?keyword='); 

有关更多信息，请参阅https://github.com/goFrendiAsgard/gofrendi.chosen.ajaxify#how-to-use

Answer 9

如果你有两个或两个以上的select，并使用史蒂夫McLenithan的答案，尝试replace第一行：

 $('#CHOSENINPUTFIELDID_chosen > div > div input').autocomplete({ 

不删除后缀： _chosen