jQuery自动完成框(Autocomplete)是一个常见的UI组件,允许用户在输入框中输入时显示匹配的建议列表。它通常基于jQuery UI库的autocomplete组件实现。
// 获取当前自动完成框实例
var autocompleteInstance = $("#yourInput").autocomplete("instance");
// 修改输入值
autocompleteInstance.term = "新值";
// 或者直接设置输入框的值
$("#yourInput").val("新值");
// 触发自动完成搜索
$("#yourInput").autocomplete("search", "新值");
$(function() {
// 初始化自动完成
$("#tags").autocomplete({
source: ["Apple", "Banana", "Orange", "Pear"],
minLength: 1
});
// 修改按钮点击事件
$("#changeBtn").click(function() {
// 方法1: 直接设置值并触发搜索
$("#tags").val("Banana");
$("#tags").autocomplete("search", "Banana");
// 方法2: 通过实例修改
// var instance = $("#tags").autocomplete("instance");
// instance.term = "Banana";
// instance.search();
});
});
原因:可能没有正确触发搜索方法或minLength设置过高。
解决:
// 确保触发搜索
$("#yourInput").autocomplete("search", "新值");
// 或检查minLength设置
// 获取当前自动完成实例
var instance = $("#yourInput").autocomplete("instance");
// 修改source选项
instance.options.source = ["新数据1", "新数据2", "新数据3"];
// 刷新自动完成
instance._initSource();
$("#tags").autocomplete({
source: ["Apple", "Banana", "Orange", "Pear"],
minLength: 1
}).autocomplete("instance")._renderItem = function(ul, item) {
return $("<li>")
.append("<div>" + item.label + " (自定义)</div>")
.appendTo(ul);
};