搜索插件——autocomplete

時間 2019-12-17

標籤搜索插件 autocomplete 简体版

原文原文鏈接

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

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

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

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

在瀏覽器中顯示的效果：jquery

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>搜索插件</title>
        <link href="http://www.imooc.com/data/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script src="http://www.imooc.com/data/jquery.autocomplete.js" type="text/javascript"></script>
    </head>
    
    <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); 
                function SearchCallback(event, data, formatted) {
                    $(".tip").show().html("您的選擇是：" + (!data ? "空" : formatted));
                }
            });
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

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