Jquery Chosen插件 - 由Ajax动态填充列表
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery Chosen插件 - 由Ajax动态填充列表相关的知识，希望对你有一定的参考价值。
我试图使用插件Chosen for Multiple Select构建我的下拉菜单。这是我基于的行为：
所以，而不是在我的选择中有3个硬编码<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.不知道为什么会这样
-----------------------------
你们对我做错了什么有什么想法吗？我完全被困在这里......！
哦，顺便说一下，我不介意更改插件源，因为它是我使用它的唯一地方....
试试这个：
$('.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>');
}));
}
});
}
});
_chosen如果要从ajax生成select标记，请在成功函数中添加：
var object = $("#lstValue_chosen").find('.chosen-choices').find('input[type="text"]')[0];
var _KeyCode = event.which || event.keyCode;
if (_KeyCode != 37 && _KeyCode != 38 && _KeyCode != 39 && _KeyCode != 40) {
if (object.value != "") {
var SelectedObjvalue = object.value;
if (SelectedObjvalue.length > 0) {
var obj = { value: SelectedObjvalue };
var SelectedListValue = $('#lstValue').val();
var Uniqueid = $('#uniqueid').val();
$.ajax({
url: '/Admin/GetUserListBox?SelectedValue=' + SelectedListValue + '&Uniqueid=' + Uniqueid,
data: { value: SelectedObjvalue },
type: 'GET',
async: false,
success: function (response) {
if (response.length > 0) {
$('#lstValue').html('');
var options = '';
$.each(response, function (i, obj) {
options += '<option value="' + obj.Value + '">' + obj.Text + '</option>';
});
$('#lstValue').append(options);
$('#lstValue').val(SelectedListValue);
$('#lstValue').trigger("chosen:updated");
object.value = SelectedObjvalue;
}
},
error: function (xhr, ajaxOptions, thrownError) {
//jAlert("Error. Please, check the data.", " Deactivate User");
alert(error.StatusText);
}
});
}
}
}
或者，如果您在单击添加更多按钮时生成选择标记，则添加：
$('.chosen').chosen();
在功能里面。
您可以使用优秀的Select2插件通过AJAX动态填充列表。 From my answer to "Is there a way to dynamically ajax add elements through jquery chosen plugin?"：
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");
});
}
});
这可能会有所帮助。你必须触发一个事件。
$("#DropDownID").trigger("liszt:updated");
其中“DropDownID”是<select>的ID。
更多信息：http://harvesthq.github.com/chosen/
当DOM中的OPTION元素发生变化时，Chosen插件不会自动更新其选项列表。您必须向其发送一个事件以触发更新：
Pre 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');
}
}
选择的答案已经过时，熔化/ 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");
});
像Vicky建议的那
以上是关于Jquery Chosen插件 - 由Ajax动态填充列表的主要内容，如果未能解决你的问题，请参考以下文章
有没有办法通过 jquery 选择的插件动态 ajax 添加元素？