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

时间:2023-01-27
本文介绍了Jquery Chosen 插件 - 通过 Ajax 动态填充列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我正在尝试使用为 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 动态填充列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

上一篇:使用 jQuery(插件?)的非 ajax GET/POST 下一篇:如何使用 jQuery 选择的插件重置表单?

相关文章

最新文章