Jquery Chosen插件 - 由Ajax动态填充列表

Question

我试图使用插件Chosen for Multiple Select构建我的下拉菜单.这是我基于的行为:

http://jsfiddle.net/JfLvA/

所以,而不是在我的选择中有3个harcoded <option>.我希望此列表是由ajax请求填充的json数组的值.这将由自动完成触发.

因此,如果用户键入"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>');

          }
       });
    }
});

结果:

我输入"汽车",在下拉列表中我得到"没有汽车的结果",然后我得到了我想要的所有结果.

1.为什么我收到"无结果"消息,因为我可以在我的json数组和列表中看到我得到了结果.

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

当我删除"汽车"并输入"sam"时.在"汽车"结果之后显示"sam"的结果.(基本上,我看到两者的结果,而不仅仅是我当前搜索的结果)

我想我要清除keyUp上的ul？认为插件已经这样做了

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

当我点击一个名称实际选择它并将其添加到选择中时,我在selected.js文件中得到一个javascript错误

item未定义
"item.selected = true;" 732行

该插件的链接:http: //harvesthq.github.com/chosen/chosen/chosen.jquery.js

并且它不会在select中添加任何内容.

3.不知道为什么会这样

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

你们对我做错了什么有什么想法吗？我完全被困在这里......!

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

Answer 1

您可以使用优秀的Select2插件通过AJAX动态填充列表.从我的答案"有没有办法通过jquery选择的插件动态ajax添加元素？" :

看看整齐的Select2插件,它基于Chosen本身,支持远程数据源(又名AJAX数据)和无限滚动.

Answer 2

试试这个:

$('.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 3

Ashirvad的回答不再适用.请注意,类名更改并使用option元素而不是li元素.我更新了我的答案,不使用已弃用的"成功"事件,而是选择.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是<select>.

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

Answer 5

当DOM中的OPTION元素发生变化时,Chosen插件不会自动更新其选项列表.您必须向其发送一个事件以触发更新:

预选1.0: $('.chzn-select').trigger("liszt:updated");

选择1.0 $('.chosen-select').trigger("chosen:updated");

如果您正在动态管理OPTION元素,那么只要OPTION更改,您就必须这样做.你这样做的方式会有所不同 - 在AngularJS中,尝试这样的事情:

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

Answer 6

选择的答案已经过时,熔化/ ajax选择的插件也是如此.

使用Select2插件有很多错误,我无法解决它.

这是我对这个问题的回答.

我在用户输入后将我的解决方案与功能触发器集成 感谢这个答案: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");

  });