国产免费又爽又刺激在线观看,免费一级毛片在线播放放视频,最近日本免费观看高清视频,亚洲无码视频观看

<ruby id="cmmwe"></ruby>

  • <var id="cmmwe"></var>
    <b id="cmmwe"></b>
    <source id="cmmwe"><track id="cmmwe"><ins id="cmmwe"></ins></track></source>

      1. 0712-2888027 189-8648-0214
        微信公眾號(hào)

        孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號(hào)

        當(dāng)前位置:主頁(yè) > 技術(shù)支持 > Javascript/JQuery > jQuery UI Autocomplete根據(jù)用戶輸入值自動(dòng)補(bǔ)全插件

        jQuery UI Autocomplete根據(jù)用戶輸入值自動(dòng)補(bǔ)全插件

        時(shí)間:2016-12-08來(lái)源:風(fēng)信官網(wǎng) 點(diǎn)擊: 1689次
        jQuery UI Autocomplete根據(jù)用戶輸入值進(jìn)行搜索和過(guò)濾,讓用戶快速找到并從預(yù)設(shè)值列表中選擇。
         
        API手冊(cè)參考地址:http://api.jqueryui.com/autocomplete/
         
        有了這個(gè)插件,你的搜索條將變得更加智能啦!
        jQuery UI Autocomplete根據(jù)用戶輸入值自動(dòng)補(bǔ)全插件
         
        默認(rèn)應(yīng)用的示例代碼:
         
        $( ".selector" ).autocomplete({
          appendTo: "#someElem"
        });
         
        // Getter
        var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" );
         
        // Setter
        $( ".selector" ).autocomplete( "option", "appendTo", "#someElem" );
         
        Autocomplete,是一個(gè)功能強(qiáng)大的自動(dòng)完成輸入的jQuery插件,它也是jQuery UI的一部分。

        項(xiàng)目應(yīng)用:

        相信用過(guò)百度或者Google搜索的讀者一定不會(huì)陌生,當(dāng)我們?cè)谒阉骺蛑虚_(kāi)始輸入搜索的關(guān)鍵字時(shí),搜索引擎就會(huì)智能地幫我們聯(lián)想并匹配我們所需的搜索關(guān)鍵字內(nèi)容。

        Google搜索輸入框的自動(dòng)完成功能Google搜索輸入框的自動(dòng)完成功能

        現(xiàn)在,我們使用jQuery UI的Autocomplete部件就可以非常簡(jiǎn)單方便地實(shí)現(xiàn)如上述圖片中Google搜索框所具備的自動(dòng)完成功能。

        jQuery UI 的當(dāng)前最新版本為1.10.4。由于不同版本之間的用法也有所差異,其他網(wǎng)站關(guān)于之前版本的Autocomplete用法介紹并不能完全適用于最新版本。因此,我們有必要了解一下jQuery UI Autocomplete的最新用法。

        在使用Autocomplete實(shí)現(xiàn)自動(dòng)完成功能之前,我們先來(lái)完成一些準(zhǔn)備工作。比如,先編寫包含如下代碼的html文件:

        對(duì)應(yīng)的運(yùn)行效果如下:
         

        <!DOCTYPE html>
        <html lang="zh">
        <head>
        <meta charset="UTF-8">
        <title>jQuery Autocomplete入門示例</title>
        </head>
        <body>
         
        <label for="language">請(qǐng)輸入指定的語(yǔ)言:</lable>
        <input id="language" name="language" type="text">
         
        </body>
        </html>
         

        input.png

        在完成上述準(zhǔn)備工作之后,我們需要在html代碼中引入jQuery UI的js文件和css文件,由于jQuery UI是依賴于jQuery的,因此我們還需要在引入jQuery UI之前引入jQuery。

        <!DOCTYPE html>
        <html lang="zh">
        <head>
        <meta charset="UTF-8">
        <title>jQuery Autocomplete入門示例</title>
        <!-- 引入jQuery UI的css文件 -->
        <link href="http://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css" />
        <!-- 引入jQuery的js文件 -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>
        <!-- 引入jQuery UI的js文件 -->
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" ></script>
        </head>
        <body>
         
        <label for="language">請(qǐng)輸入指定的語(yǔ)言:</lable>
        <input id="language" name="language" type="text">
         
        </body>
        </html>

        現(xiàn)在,我們就來(lái)編寫js代碼讓language輸入框?qū)崿F(xiàn)自動(dòng)完成功能。要實(shí)現(xiàn)自動(dòng)完成功能,我們需要如下調(diào)用jQuery UI擴(kuò)展的autocomplete()方法:

        $("#language").autocomplete(optionsObj);

        這里的optionsObj是一個(gè)用于配置autocomplete相關(guān)參數(shù)選項(xiàng)的JavaScript對(duì)象。我們可以參考Autocomplete官方文檔的相關(guān)說(shuō)明來(lái)設(shè)置該對(duì)象。

        Autocomplete有一個(gè)非常重要的屬性參數(shù)source,它表示用于自動(dòng)完成功能的數(shù)據(jù)集合。source屬性的值可以是一個(gè)數(shù)組;也可以是一個(gè)字符串,用于表示一個(gè)遠(yuǎn)程請(qǐng)求的URL地址,通過(guò)處理該URL返回的數(shù)據(jù)從而獲得autocomplete所需的數(shù)據(jù);它還可以是一個(gè)回調(diào)函數(shù),以便于完成一些復(fù)雜的數(shù)據(jù)處理。

        現(xiàn)在,我們就使用最簡(jiǎn)單的方式,給source屬性指定一個(gè)靜態(tài)的數(shù)組,來(lái)初步實(shí)現(xiàn)自動(dòng)完成功能。

        $("#language").autocomplete({
        source: [ 
            "Chinese",
            "English",
            "Spanish",
            "Russian",
            "French",
            "Japanese",
            "Korean",
            "German"
        ]
        });

        此時(shí),使用瀏覽器訪問(wèn)該html頁(yè)面就會(huì)發(fā)現(xiàn),我們已經(jīng)完成的最基本的自動(dòng)完成功能了。

        使用autocomplete實(shí)現(xiàn)基本的自動(dòng)完成功能使用autocomplete實(shí)現(xiàn)基本的自動(dòng)完成功能

        不過(guò),有些時(shí)候我們希望列表顯示的文本和實(shí)際輸入的值并不一致。此時(shí),我們?yōu)閟ource指定多個(gè)對(duì)象的數(shù)組,每個(gè)對(duì)象必須包含label和value屬性,label表示顯示的文本,value表示實(shí)際輸入的值(當(dāng)然它也可以包括其他屬性,你可以自行進(jìn)行相關(guān)操作)。

        $("#language").autocomplete({
            // 靜態(tài)的數(shù)據(jù)源,根據(jù)label屬性進(jìn)行顯示或模糊匹配,當(dāng)給輸入框設(shè)置value屬性值
            source: [
                { label: "Chinese", value: 1 },
                { label: "English", value: 2 },
                { label: "Spanish", value: 3 },
                { label: "Russian", value: 4 },
                { label: "French", value: 5 },
                { label: "Japanese", value: 6 },    
            ]
        });
        
        // 最上面由多個(gè)字符串組成的數(shù)組,會(huì)被視為label和value值相同、均為該字符串的對(duì)象

        更多的時(shí)候,我們希望該輸入框顯示的還是label屬性值,但還要給另外的元素(例如隱藏文本域)設(shè)置value屬性值,或者做一些其他處理。我們可以使用select事件來(lái)協(xié)助處理。

        $("#language").autocomplete({
            // 靜態(tài)的數(shù)據(jù)源
            source: [
                { label: "Chinese", value: 1, sayHi: "你好" },
                { label: "English", value: 2, sayHi: "Hello" },
                { label: "Spanish", value: 3, sayHi: "Hola" },
                { label: "Russian", value: 4, sayHi: "Привет" },
                { label: "French", value: 5, sayHi: "Bonjour" },
                { label: "Japanese", value: 6, sayHi: "こんにちは" },    
            ],
            select: function(event, ui){
                // 這里的this指向當(dāng)前輸入框的DOM元素
                // event參數(shù)是事件對(duì)象
                // ui對(duì)象只有一個(gè)item屬性,對(duì)應(yīng)數(shù)據(jù)源中被選中的對(duì)象
                $(this).value = ui.item.label;
                $("#lang_id").val( ui.item.value );
                $("#sayHi").html( ui.item.sayHi );
                
                // 必須阻止事件的默認(rèn)行為,否則autocomplete默認(rèn)會(huì)把ui.item.value設(shè)為輸入框的value值
                event.preventDefault();     
            }
        });

        在實(shí)際應(yīng)用上,我們的數(shù)據(jù)源并不是一成不變的。大多數(shù)情況下,我們的數(shù)據(jù)都保存在數(shù)據(jù)庫(kù)中,此時(shí),我們就需要使用autocomplete通過(guò)AJAX請(qǐng)求獲取遠(yuǎn)程數(shù)據(jù)作為數(shù)據(jù)源。

        $("#language").autocomplete({
        source: "public.php"
        });

        對(duì)應(yīng)的 ajax-actions.php 的服務(wù)器頁(yè)面代碼如下:

        <?php
        header('Content-Type:text/html;charset=UTF-8');
         
        //為了方便舉例,這里使用數(shù)組來(lái)模擬,你也可以在實(shí)際應(yīng)用中從數(shù)據(jù)庫(kù)中讀取數(shù)據(jù)
        //返回的數(shù)據(jù)最好是數(shù)組或?qū)ο箢愋偷腏SON格式字符串
        $languages = array('Chinese', 'English', 'Spanish', 'Russian', 'French', 'Japanese', 'Korean', 'German');
         
        echo json_encode($languages);
        ?>

        此時(shí),我們?cè)俅卧L問(wèn)該頁(yè)面,我們?nèi)匀豢梢钥吹阶詣?dòng)完成的輸入效果。

        從遠(yuǎn)程服務(wù)器獲取數(shù)據(jù)的自動(dòng)完成功能從遠(yuǎn)程服務(wù)器獲取數(shù)據(jù)的自動(dòng)完成功能

        注意:細(xì)心的讀者可能已經(jīng)注意到了,不管是從js數(shù)組中獲取數(shù)據(jù),還是從后臺(tái)服務(wù)器獲取數(shù)據(jù),我們的數(shù)據(jù)并沒(méi)有發(fā)生變化;但是,我們?cè)趶暮笈_(tái)獲取數(shù)據(jù)的頁(yè)面輸入"c"時(shí),顯示了所有的數(shù)據(jù)項(xiàng),而不是如之前一樣只顯示篩選過(guò)濾之后的"Chinese"和"French"。這是因?yàn)?,?dāng)我們從遠(yuǎn)程請(qǐng)求獲取數(shù)據(jù)時(shí),Autocomplete認(rèn)為服務(wù)器已經(jīng)進(jìn)行了過(guò)濾處理,返回的數(shù)據(jù)都是直接可用的,無(wú)需再過(guò)濾。

        在發(fā)送AJAX請(qǐng)求時(shí),Autocomplete會(huì)把當(dāng)前輸入框中的文字以默認(rèn)參數(shù)名term的形式追加到我們?cè)O(shè)置的URL地址后面。當(dāng)我們輸入一個(gè)c時(shí),Autocomplete實(shí)際發(fā)送的請(qǐng)求路徑為/ajax-actions.php?term=c。

        在上面的實(shí)例中,由于我們使用的是php數(shù)組來(lái)模擬服務(wù)器返回的數(shù)據(jù),沒(méi)有根據(jù)用戶的輸入來(lái)返回對(duì)應(yīng)的數(shù)據(jù),才會(huì)導(dǎo)致上述結(jié)果。如果在實(shí)際應(yīng)用中,使用類似如下SQL語(yǔ)句來(lái)查詢數(shù)據(jù),則不會(huì)存在該問(wèn)題。

        <?php 
        // 注意:對(duì)于用戶輸入一般需要進(jìn)行額外的安全處理
        $term = $_GET['term'];
        $sql = "select column1 as label, column2 as value, ... from table1 where column1 like '$term%'";
        $languages = query($sql);
        echo json_encode($languages);
        ?>

        此外,有些時(shí)候我們需要根據(jù)用戶的輸入或其他操作來(lái)構(gòu)造不同的請(qǐng)求URL,我們可以為source指定函數(shù)。Autocomplete將用戶輸入交給該函數(shù),該函數(shù)可以進(jìn)行任何處理,然后把通過(guò)任何方式獲得的數(shù)據(jù)交給Autocomplete處理即可。

        $("#language").autocomplete({
            // 通過(guò)函數(shù)來(lái)獲取并處理數(shù)據(jù)源
            source: function(request, response){
                // request對(duì)象只有一個(gè)term屬性,對(duì)應(yīng)用戶輸入的文本
                // response是一個(gè)函數(shù),在你自行處理并獲取數(shù)據(jù)后,將JSON數(shù)據(jù)交給該函數(shù)處理,以便于autocomplete根據(jù)數(shù)據(jù)顯示列表
                
                // 自行處理并獲取數(shù)據(jù)...
                var dataObj = [...]; // 表示處理后的JSON數(shù)據(jù)
                response(dataObj); // 最后將數(shù)據(jù)交給autocomplete去展示        
            }
        });

        在上面的講解中,我們介紹了autocomplete的必需參數(shù)選項(xiàng)source。除此之外,還有許多的參數(shù)選項(xiàng)可以給我們提供更加強(qiáng)大的其他輔助功能。


        欄目列表
        推薦內(nèi)容
        熱點(diǎn)內(nèi)容
        展開(kāi)