Jquery Chosenプラグイン-Ajaxによるリストの動的な入力
Multiple Selectに選択したプラグインを使用してドロップダウンメニューを作成しようとしています。ここに私が基づいている行動があります：
したがって、selectに3つのharcoded <option>を使用する代わりに。このリストは、ajaxリクエストによって生成されたjson配列の値にしたいです。これはオートコンプリートによってトリガーされます。
したがって、ユーザーが「car」と入力すると、ajax呼び出しを介してレターを送信し、そのような配列を取得します。
[{"id"： "2489"、 "name"： "carrie"}、{"id"： "2490"、 "name"： "Caroline"}、{"id"： "2491"、 "name"： 「キャロル」}]
コード：
$(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」の結果は、「car」の結果の後に表示されます。 （基本的には、現在の検索結果だけでなく、両方の結果が表示されます）
2。私はkeyUpのulをクリアすると思いますか？プラグインはすでにそれをやっていたと思っていました
-----------------------------
名前をクリックして実際に選択して選択に追加すると、chosen.jsファイル内でjavascriptエラーが発生します
アイテムは未定義です
"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>');
}));
}
});
}
});
AJAX優れたSelect2プラグインを使用して、リストに動的に入力できます。 From 「jqueryが選択したプラグインを通じて要素を動的にajaxに追加する方法はありますか？」 ：
きちんとしたSelect2プラグインを見てください。これはChosen に基づいています）リモートデータソース（別名AJAX data）および無限スクロールをサポートしています。
Ashirvadの答えはもはや機能しません。クラス名が変更され、li要素の代わりにoption要素が使用されていることに注意してください。非推奨の「success」イベントを使用せず、代わりに.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です。
選択されたプラグインは、DOMのOPTION要素が変更されてもオプションのリストを自動的に更新しません。更新をトリガーするには、イベントを送信する必要があります。
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');
}
}
選択された答えは時代遅れです。同じことがmelticeice/ajax-chosenプラグインにも当てはまります。
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が提案したように、Select2にはAJAX機能が組み込まれており、素晴らしいプラグインのように見えます。
選択したものから切り替えたくない場合は、AJAX-Chosenを試してください https://github.com/meltingice/ajax-chosen
選択されたAPIは大きく変わりました。
指定された解決策のどれもがあなたのために働かない場合、これを試みることができます： https://github.com/goFrendiAsgard/gofrendi.chosen.ajaxify
関数は次のとおりです。
// 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 を参照してください。
Ajaxからselectタグを生成している場合、成功関数内にこれを追加します。
$('.chosen').chosen();
または、[追加]ボタンをクリックして選択タグを生成する場合は、次を追加します。
$('.chosen').chosen();
関数内。
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);
}
});
}
}
}
複数の選択があり、Steve McLenithanの答えを使用する場合、最初の行を次のように置き換えてみてください。
$('#CHOSENINPUTFIELDID_chosen > div > div input').autocomplete({
接尾辞を削除しない：_chosen