成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

Bootstrap中Typeahead組件怎么用-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)Bootstrap中Typeahead組件怎么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

目前創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、龍陵網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

Bootstrap 中的 Typeahead 組件就是通常所說的自動完成 AutoComplete，功能很強(qiáng)大，但是，使用上并不太方便。這里我們將介紹一下這個(gè)組件的使用。

Bootstrap中Typeahead組件怎么用

第一，簡單使用

首先，最簡單的使用方式，就是直接在標(biāo)記中聲明，通過data-provide="typeahead"來聲明這是一個(gè) typeahead 組件，通過 data-source= 來提供數(shù)據(jù)。當(dāng)然了，你還必須提供 bootstrap-typeahead.js 腳本。

<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<div style="margin: 50px 50px">
<label for="product_search">Product Search: </label>
<input id="product_search" type="text" data-provide="typeahead"
     data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>
</div>
 
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
 
</body>
</html>

第二，使用腳本填充數(shù)據(jù)

通常，我們使用腳本來填充數(shù)據(jù)，那么，頁面可以變成如下的形式。

<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<div style="margin: 50px 50px">
<label for="product_search">Product Search: </label>
<input id="product_search" type="text" data-provide="typeahead">
</div>
 
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
 
<script>
$(document).ready(function($) {
   // Workaround for bug in mouse item selection
   $.fn.typeahead.Constructor.prototype.blur = function() {
      var that = this;
      setTimeout(function () { that.hide() }, 250);
   };
 
   $('#product_search').typeahead({
      source: function(query, process) {
         return ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"];
      }
   });
})
</script>
 
</body>
</html>

注意，我們提供了一個(gè) source 函數(shù)來提供數(shù)據(jù)，這個(gè)函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù) query 表示用戶的輸入，第二個(gè)參數(shù)是 process 函數(shù)，這個(gè) process 函數(shù)是 typeahead 提供的，用來處理我們的數(shù)據(jù)。

如果你希望通過 Ajax 調(diào)用從服務(wù)器端獲取匹配的數(shù)據(jù)，那么，在異步完成的處理函數(shù)中，你需要獲取一個(gè)匹配的字符串?dāng)?shù)組，然后，將這個(gè)數(shù)組作為參數(shù)，調(diào)用 process 函數(shù)。

第三，支持 Ajax 獲取數(shù)據(jù)

說了半天，數(shù)據(jù)都是從本地獲取的，到底如何從服務(wù)器端獲取數(shù)據(jù)呢？

其實(shí)很簡單，在 source 函數(shù)中，自己調(diào)用 Ajax 方法來獲取數(shù)據(jù)，主要注意的是，在獲取數(shù)據(jù)之后，調(diào)用 typeahead 的 process 函數(shù)處理即可。

$('#product_search').typeahead({
    source: function (query, process) {
        var parameter = {query: query};
        $.post('@Url.Action("AjaxService")', parameter, function (data) {
            process(data);
        });
    }
});

當(dāng)然了，在服務(wù)器上，你需要?jiǎng)?chuàng)建一個(gè)服務(wù)來提供數(shù)據(jù)，這里，我們演示使用隨機(jī)數(shù)來生成一組隨機(jī)數(shù)據(jù)的方法。

public ActionResult AjaxService(string query)
{
    System.Collections.ArrayList list
        = new System.Collections.ArrayList();
    System.Random random = new Random();

    for (int i = 0; i < 20; i++)
    {
        string item  = string.Format("{0}{1}", query, random.Next(10000));
        list.Add(item);
    }
    return this.Json(list);
}

第四，使用highlighter 和 updater

除了使用 source 函數(shù)之外，還可以使用highlighter 函數(shù)來特別處理匹配項(xiàng)目的顯示，使用 updater 函數(shù)，在選擇了某個(gè)匹配項(xiàng)之后，做出一些后繼的處理。

Bootstrap中Typeahead組件怎么用

默認(rèn)的 highlighter 是這樣實(shí)現(xiàn)的，item 是匹配的項(xiàng)目，找到匹配的部分之后，使用 <strong> 加粗了。

highlighter: function (item) {
    var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
    return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
        return '<strong>' + match + '</strong>'
    })
}

而 updater 的默認(rèn)實(shí)現(xiàn)就更加簡單了。

updater: function (item) {
    return item
}

我們可以重寫這兩個(gè)函數(shù)，來實(shí)現(xiàn)自定義的處理。

<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<div style="margin: 50px 50px">
<label for="product_search">Product Search: </label>
<input id="product_search" type="text" data-provide="typeahead">
</div>
 
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
 
<script>
$(document).ready(function($) {
   // Workaround for bug in mouse item selection
   $.fn.typeahead.Constructor.prototype.blur = function() {
   var that = this;
      setTimeout(function () { that.hide() }, 250);
   };
 
   $('#product_search').typeahead({
      source: function(query, process) {
         return ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"];
      },
 
      highlighter: function(item) {
         return "==>" + item + "<==";
      },
 
      updater: function(item) {
         console.log("'" + item + "' selected.");
      return item;
}
});
})
</script>
</body>
</html>

第五，使用對象數(shù)據(jù)

實(shí)際上，你的數(shù)據(jù)可能是一組對象而不是一個(gè)字符串?dāng)?shù)組，下面的例子中，我們使用一個(gè)產(chǎn)品對象的數(shù)組來說明，每個(gè)產(chǎn)品對象有一個(gè) id 編號，還有名稱  name 和價(jià)格 price .

<html>
<head>
    <link href="~/Content/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

    <div style="margin: 50px 50px">
        <label for="product_search">Product Search: </label>
        <input id="product_search" type="text" data-provide="typeahead">
    </div>
    <script src="~/Content/dist/js/jquery.js"></script>
    <script src="~/Content/dist/js/bootstrap-typeahead.js"></script>
    <script src="~/Content/dist/js/underscore-min.js"></script>


    <script>
        $(document).ready(function ($) {
            // Workaround for bug in mouse item selection
            $.fn.typeahead.Constructor.prototype.blur = function () {
                var that = this;
                setTimeout(function () { that.hide() }, 250);
            };

            var products = [
            {
                id: 0,
                name: "Deluxe Bicycle",
                price: 499.98
            },
            {
                id: 1,
                name: "Super Deluxe Trampoline",
                price: 134.99
            },
            {
                id: 2,
                name: "Super Duper Scooter",
                price: 49.95
            }
            ];

            $('#product_search').typeahead({
                source: function (query, process) {
                    var results = _.map(products, function (product) {
                        return product.name;
                    });
                    process(results);
                },

                highlighter: function (item) {
                    return "==>" + item + "<==";
                },

                updater: function (item) {
                    console.log("'" + item + "' selected.");
                    return item;
                }
            });
        })
    </script>

</body>
</html>

第六，高級用法

我們希望能夠在提示中顯示產(chǎn)品的更加詳細(xì)的信息。

首先，修改我們的 source 函數(shù)，原來這個(gè)函數(shù)返回一個(gè)字符串的數(shù)組，現(xiàn)在我們返回一個(gè)產(chǎn)品 id 的數(shù)組，但是，process 函數(shù)期望得到一個(gè)字符串?dāng)?shù)組的參數(shù)，所以，我們將每個(gè) id 都轉(zhuǎn)換為字符串類型。

然后，typeahead 組件就會調(diào)用 matcher 函數(shù)來檢查用戶的輸入是否與某個(gè)項(xiàng)目匹配，你可以使用產(chǎn)品的 id 在產(chǎn)品列表中獲取產(chǎn)品對象，然后檢查產(chǎn)品的名稱與用戶的輸入是否匹配。

默認(rèn)的 matcher 直接使用用戶的輸入來匹配，我們?nèi)绻褂?id 的話，顯然不能匹配，我們需要重寫 matcher 函數(shù)。

matcher 接收一個(gè)當(dāng)前項(xiàng)目的字符串，用戶當(dāng)前的輸入為 this.query，匹配返回 true, 否則返回 false. 默認(rèn)的 matcher 如下：

, matcher: function (item) {    return ~item.toLowerCase().indexOf(this.query.toLowerCase())
}

將它重寫為永遠(yuǎn)匹配，直接返回 true。而在 highlighter 中將顯示結(jié)果替換為希望的產(chǎn)品名稱和價(jià)格組合。在下一步的 highlighter 中，我們使用 Underscore 組件中的 find 方法，通過產(chǎn)品的 id 在產(chǎn)品列表中獲取產(chǎn)品對象，然后，顯示產(chǎn)品名稱和價(jià)格的組合。

highlighter: function (id) {    var product = _.find(products, function (p) {        return p.id == id;
    });    return product.name + " ($" + product.price + ")";
}

默認(rèn)的 updater 直接返回當(dāng)前匹配的內(nèi)容，我們這里是一個(gè) id, 需要重寫。

updater: function (item) {    return item
}

在用戶選擇之后，typeahead 將會調(diào)用 updater 函數(shù)，我們通過產(chǎn)品的 id 在產(chǎn)品列表中獲取產(chǎn)品對象，然后

最后，updater 函數(shù)返回一個(gè)產(chǎn)品名稱的字符串，為輸入框提供內(nèi)容。setSelectedProduct 是我們的一個(gè)自定義函數(shù)。

updater: function (id) {
    var product = _.find(products, function (p) {
        return p.id == id;
    });
    that.setSelectedProduct(product);
    return product.name;
}

下面是全部的代碼。

<html>
<head>
    <link href="~/Content/dist/css/bootstrap.min.css" rel="stylesheet" />

</head>
<body>

    <div style="margin: 50px 50px">
        <label for="product_search">Product Search: </label>
        <input id="product_search" type="text" data-provide="typeahead">
        <div id="product" style="border-width: 1; padding: 5px; border-style: solid"></div>
    </div>

    <script src="~/Content/dist/js/jquery.js"></script>
    <script src="~/Content/dist/js/bootstrap-typeahead.js"></script>
    <script src="~/Content/dist/js/underscore-min.js"></script>

    <script>
        $(document).ready(function ($) {
            // Workaround for bug in mouse item selection
            $.fn.typeahead.Constructor.prototype.blur = function () {
                var that = this;
                setTimeout(function () { that.hide() }, 250);
            };

            var products = [
            {
                id: 0,
                name: "Deluxe Bicycle",
                price: 499.98
            },
            {
                id: 1,
                name: "Super Deluxe Trampoline",
                price: 134.99
            },
            {
                id: 2,
                name: "Super Duper Scooter",
                price: 49.95
            }
            ];

            var that = this;

            $('#product_search').typeahead({
                source: function (query, process) {
                    $('#product').hide();
                    var results = _.map(products, function (product) {
                        return product.id + "";
                    });
                    process(results);
                },

                matcher: function (item) {
                    return true;
                },

                highlighter: function (id) {
                    var product = _.find(products, function (p) {
                        return p.id == id;
                    });
                    return product.name + " ($" + product.price + ")";
                },

                updater: function (id) {
                    var product = _.find(products, function (p) {
                        return p.id == id;
                    });
                    that.setSelectedProduct(product);
                    return product.name;
                }

            });

            $('#product').hide();
            this.setSelectedProduct = function (product) {
                $('#product').html("Purchase: <strong>" + product.name + " ($" + product.price + ")</strong>").show();
            }
        })
    </script>

</body>
</html>

感謝各位的閱讀！關(guān)于“Bootstrap中Typeahead組件怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站欄目：Bootstrap中Typeahead組件怎么用-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://jinyejixie.com/article18/csdogp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站導(dǎo)航、動態(tài)網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)公司、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)
囊谦县| 大英县| 丘北县| 宝丰县| 英德市| 大竹县| 新密市| 黑山县| 和平区| 新津县| 晋城| 专栏| 徐汇区| 怀仁县| 泰安市| 昂仁县| 朔州市| 高安市| 疏附县| 彩票| 宜春市| 甘孜县| 淮阳县| 南木林县| 丰都县| 富宁县| 武胜县| 名山县| 铜梁县| 峨眉山市| 个旧市| 保山市| 西畴县| 遂川县| 额尔古纳市| 乐东| 家居| 大理市| 柘荣县| 普洱| 靖西县|