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