3
我正在使用JQuery UI Autocomplete combobox。如何動態填充JQuery自動完成組合框？
我有一個簡單的選擇是這樣的：
<select id="myselect" class="combobox">
<option value="" ></option>
</select>"
頁面加載時我稱之爲：
$('.combobox').combobox();
我需要做的就是填充組合框的頁面加載後。這聽起來像是一件微不足道的任務，但是我在最後一天試圖讓自己的頭靠在牆上。
即使當我嘗試使用簡單的追加像這樣：
$("#myselect").append('<option value="value1">text 1</option>')
值沒有出現在組合框中。上面的調用必須是錯誤的，但我不知道如何將值附加到組合框。
請給我一個方法來做到這一點。
你的幫助是非常讚賞
這是我combobox.js文件的源代碼：
(function ($) {
$.widget("ui.combobox", {
_create: function() {
var select = this.element;
select = this.element;
var watermark = "Please select a restaurant...";
select.hide();
// process select options into an array
var opts = new Array();
$('option', select).each(function (index) {
var opt = new Object();
opt.value = $(this).val();
if ($(this).text() != "") {
opt.label = $(this).text();
opts[opts.length] = opt;
}
});
// set up input text element
var input = $("<input class='combo_input' type='text'>");
input.insertAfter(select);
input.autocomplete({
source: opts,
delay: 0,
change: function (event, ui) {
if (!ui.item) {
// user didn't select an option, but what they typed may still match
var enteredString = $(this).val();
var stringMatch = false;
for (var i = 0; i < opts.length; i++) {
if (opts[i].label.toLowerCase() == enteredString.toLowerCase()) {
select.val(opts[i].value);// update (hidden) select
//$(this).val(opts[i].label);// corrects any incorrect case
//opts[i].css("border", "1px solid red");
stringMatch = true;
// Trigger the custom changed event
self._trigger("changed", event, {
value: select.val()
});
break;
}
}
if (!stringMatch) {
// remove invalid value, as it didn't match anything
$(':selected', select).text("");
$(this).val($(':selected', select).text()).addClass('watermark');
}
return false;
}
},
select: function (event, ui) {
select.val(ui.item.value);// update (hidden) select
$(this).val(ui.item.label);
if ($(this).val() == watermark) {
input.addClass('watermark');
imgbt.addClass("invisibility");
}
else {
input.removeClass('watermark');
imgbt.removeClass("invisibility");
}
// Trigger the selected event
ui.item.selected = true;
self._trigger("selected", event, {
value: ui.item.value
});
return false;
},
focus: function (event, ui) {
if (event.which === 38 || event.which === 40) {
$(this).val(ui.item.label);
return false;
}
},
// stop parent form from being while menu is open
open: function (event, ui) {
input.attr("menustatus", "open");
},
close: function (event, ui) {
input.attr("menustatus", "closed");
},
autoFocus: true,
minLength: 0
});
input.addClass("ui-widget");
// initialise text with what's currently selected
if ($(':selected', select).val() == "") {
input.val(watermark).addClass('watermark')
} else {
input.val($(':selected', select).text()).removeClass('watermark');
}
input.attr('title', input.val());
// lost focus status
input.blur(function (e) {
if (input.val() == "") {
input.val(watermark).addClass('watermark');
imgbt.addClass("invisibility");
}
else {
input.removeClass('watermark')
imgbt.removeClass("invisibility");
}
});
//clear text when user clicks in text input
input.click(function() {
if ($(this).val() == watermark) {
$(this).removeClass('watermark').val("");
imgbt.addClass("invisibility");
} else {
imgbt.removeClass("invisibility");
}
});
// over-ride form submit, so it cant submit if the menu is open
input.attr("menustatus", "closed");
var form = $(input).parents('form:first');
$(form).submit(function (e) {
return (input.attr('menustatus') == 'closed');
});
var imgbt = $("<button type=\"button\"> </button>");
imgbt.addClass('clear_bt').addClass('btn');
if (input.val() == watermark) { imgbt.addClass('invisibility') }
else { imgbt.removeClass('invisibility') }
imgbt.insertAfter(input);
// Clear all the keywords
imgbt.click(function (e) {
input.val('');
$("body").focus();
$(this).addClass('invisibility');
$("#rcbRestaurant").val("");
});
imgbt.blur(function (e) {
input.blur();
});
// set up button for fake 'select'
var btn = $("<button> </button>");
btn.attr("tabIndex", -1);
btn.attr("title", "Select your option");
btn.addClass("combobox_bt");
btn.insertAfter(imgbt);
if (select.hasClass('disabled')) {
input.addClass('disabled').attr('disabled', 'disabled');
btn.addClass('disabled').attr('disabled', 'disabled');
}
if (select.hasClass('error')) {
input.addClass('error').focus();
btn.addClass('error').focus();
} else { input.removeClass('error'); btn.removeClass('error'); }
if (select.attr('autofocus') == 'autofocus') {
input.focus();
btn.focus();
}
btn.button({
icons: {
primary: "ui-icon-triangle-1-s "
},
text: false
});
btn.removeClass("ui-corner-all");
btn.addClass("ui-corner-right ui-button-icon");
btn.click(function() {
btn.focus();
input.click();
//event.preventDefault();
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return false; // return false, so form isn't automatically submitted
}
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
return false; // return false, so form isn't automatically submitted
});
// add some styles
btn.css("z-index", "1");
btn.css("display", "inline");
btn.css("padding", 0);
$('span.ui-button-text', btn).css("padding", 0);
// for testing
/*
autocomplete: function(value) {
this.element.val(value);
this.input.val(value);
}
*/
}
});
})(jQuery);
感謝您的快速反應。這就是我正在使用的。我正在使用自動完成組合框（作爲我的問題中的鏈接）。 – seemorgh
您不應該調用組合框來創建窗口小部件，而是使用.autocomplete，頁面上有演示，嘗試過它們嗎？ – vasu
根據演示中的源代碼（在頁面底部查看源代碼鏈接 - 請參閱我的問題中的鏈接），附加組合框的調用是這樣的：$（「#combobox」）.combobox（）; – seemorgh