搜索插件-autocomplete

時間 2019-12-01

標籤搜索插件 autocomplete 简体版

原文原文鏈接

搜索插件的功能是經過插件的autocomplete()方法與文本框相綁定，當文本框輸入字符時，綁定後的插件將返回與字符相近的字符串提示選擇，調用格式以下：javascript

$(textbox).autocomplete(urlData,[options]);html

其中，textbox參數爲文本框元素名稱，urlData爲插件返回的相近字符串數據，可選項參數options爲調用插件方法時的配置對象。java

例如，當用戶在文本框輸入內容時，調用搜索插件的autocomplete()方法返回與輸入內容相匹配的字符串數據，顯示在文本框下，提示選擇，以下列代碼所示：url

<body>
<div id="divtest">
<div class="title">
<span class="fl">搜索插件</span>
</div>
<div class="content">
<span class="fl">用戶名</span><br />
<input id="txtSearch" name="txtSearch" type="text" />
<div class="tip">
</div>
</div>
</div>

<script type="text/javascript">
$(function () {
var arrUserName = ["王五", "劉明", "李小四", "劉促明", "李淵", "張小三", "王小明"];
$("#txtSearch").autocomplete(arrUserName,{
minChars: 0, //雙擊空白文本框時顯示所有提示數據
formatItem: function (data, i, total) {
return "<I>" + data[0] + "</I>"; //改變匹配數據顯示的格式
},
formatMatch: function (data, i, total) {
return data[0];
},
formatResult: function (data) {
return data[0];
}
}).result(SearchCallback); //選中匹配數據的某項數據時，調用插件的result（）方法
function SearchCallback(event, data, formatted) {
$(".tip").show().html("您的選擇是：" + (!data ? "空" : formatted));
}
});
</script>
</body>spa

當文本框與搜索插件相綁定後，輸入任意字符時，都將返回與之相匹配的字符串，提示用戶選擇，文本框在空白雙擊時，顯示所有提示信息。插件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。