Bootstrap中Typeahead元件的介紹（程式碼範例）-js教程-PHP中文網

首頁

web前端

js教程

Bootstrap中Typeahead元件的介紹（程式碼範例）

不言

Oct 15, 2018 pm 04:16 PM

bootstrap

本篇文章给大家带来的内容是关于Bootstrap中Typeahead组件的介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete，功能很强大，但是，使用上并不太方便。这里我们将介绍一下这个组件的使用。（免费课程推荐：bootstrap教程）

第一，简单使用

首先，最简单的使用方式，就是直接在标记中声明，通过 data-provide="typeahead"　来声明这是一个 typeahead 组件，通过 data-source= 来提供数据。当然了，你还必须提供 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=&#39;["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]&#39;>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
</body>
</html>

第二，使用脚本填充数据

通常，我们使用脚本来填充数据，那么，页面可以变成如下的形式。

<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);
   };
   $(&#39;#product_search&#39;).typeahead({
      source: function(query, process) {
         return ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"];
      }
   });
})
</script>
</body>
</html>

注意，我们提供了一个 source 函数来提供数据，这个函数接收两个参数，第一个参数 query 表示用户的输入，第二个参数是 process 函数，这个 process 函数是 typeahead 提供的，用来处理我们的数据。

如果你希望通过 Ajax 调用从服务器端获取匹配的数据，那么，在异步完成的处理函数中，你需要获取一个匹配的字符串数组，然后，将这个数组作为参数，调用 process 函数。

第三，支持 Ajax 获取数据

说了半天，数据都是从本地获取的，到底如何从服务器端获取数据呢？

其实很简单，在 source 函数中，自己调用 Ajax 方法来获取数据，主要注意的是，在获取数据之后，调用 typeahead 的 process 函数处理即可。

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

当然了，在服务器上，你需要创建一个服务来提供数据，这里，我们演示使用随机数来生成一组随机数据的方法。

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 函数之外，还可以使用 highlighter 函数来特别处理匹配项目的显示，使用 updater 函数，在选择了某个匹配项之后，做出一些后继的处理。

默认的 highlighter 是这样实现的，item 是匹配的项目，找到匹配的部分之后，使用 加粗了。

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

而 updater 的默认实现就更加简单了。

updater: function (item) {
    return item
}

我们可以重写这两个函数，来实现自定义的处理。

<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);
   };
 
   $(&#39;#product_search&#39;).typeahead({
      source: function(query, process) {
         return ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"];
      },
 
      highlighter: function(item) {
         return "==>" + item + "<==";
      },
 
      updater: function(item) {
         console.log("&#39;" + item + "&#39; selected.");
      return item;
}
});
})
</script>
</body>
</html>

第五，使用对象数据

实际上，你的数据可能是一组对象而不是一个字符串数组，下面的例子中，我们使用一个产品对象的数组来说明，每个产品对象有一个 id 编号，还有名称 name 和价格 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
            }
            ];

            $(&#39;#product_search&#39;).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("&#39;" + item + "&#39; selected.");
                    return item;
                }
            });
        })
    </script>
</body>
</html>

第六，高级用法

我们希望能够在提示中显示产品的更加详细的信息。

首先，修改我们的 source 函数，原来这个函数返回一个字符串的数组，现在我们返回一个产品 id 的数组，但是，process 函数期望得到一个字符串数组的参数，所以，我们将每个 id 都转换为字符串类型。

然后，typeahead 组件就会调用 matcher 函数来检查用户的输入是否与某个项目匹配，你可以使用产品的 id 在产品列表中获取产品对象，然后检查产品的名称与用户的输入是否匹配。

默认的 matcher 直接使用用户的输入来匹配，我们如果使用 id 的话，显然不能匹配，我们需要重写 matcher 函数。

matcher 接收一个当前项目的字符串，用户当前的输入为 this.query，匹配返回 true, 否则返回 false. 默认的 matcher 如下：

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

将它重写为永远匹配，直接返回 true。而在 highlighter 中将显示结果替换为希望的产品名称和价格组合。在下一步的 highlighter 中，我们使用 Underscore 组件中的 find 方法，通过产品的 id 在产品列表中获取产品对象，然后，显示产品名称和价格的组合。

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

默认的 updater 直接返回当前匹配的内容，我们这里是一个 id, 需要重写。

updater: function (item) {    
return item
}

在用户选择之后，typeahead 将会调用 updater 函数，我们通过产品的 id 在产品列表中获取产品对象，然后

最后，updater 函数返回一个产品名称的字符串，为输入框提供内容。setSelectedProduct 是我们的一个自定义函数。

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;

            $(&#39;#product_search&#39;).typeahead({
                source: function (query, process) {
                    $(&#39;#product&#39;).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;
                }
            });
            $(&#39;#product&#39;).hide();
            this.setSelectedProduct = function (product) {
                $(&#39;#product&#39;).html("Purchase: <strong>" + product.name + " ($" + product.price + ")</strong>").show();
            }
        })
    </script>

</body>
</html>

以上是Bootstrap中Typeahead元件的介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。