第五章 使用 Bootstrap Typeahead 组件(百度下拉效果)

简介: 推荐链接:http://www.cnblogs.com/haogj/p/3376874.html   UnderScore官网:http://underscorejs.org/ 参考文档:http://www.

推荐链接:http://www.cnblogs.com/haogj/p/3376874.html

 

UnderScore官网:http://underscorejs.org/

参考文档:http://www.css88.com/doc/underscore/

 

页面代码:

@{
    ViewBag.Title = "Index";
}
<script src="Scripts/bootstrap-typeahead.js"></script>
<script src="Scripts/underscore-min.js"></script>
<div>
    简单使用
    <div style="margin: 10px 50px">
        <label for="product_search">
            Product Search:
        </label>
        <input id="product_search" type="text" data-provide="typeahead" data-source='["DATA1", "DATA2", "DATA3"]' />
    </div>
    使用脚本填充数据
    <div style="margin: 10px 50px">
        <label for="product_search">
            Product Search:
        </label>
        <input id="product_search_js" type="text" data-provide="typeahead">
    </div>
    <script type="text/javascript">
        $(document).ready(function ($) {
            $.fn.typeahead.Constructor.prototype.blur = function () {
                var that = this;
                setTimeout(function () { that.hide() }, 250);
            };

            $('#product_search_js').typeahead({
                source: function (query, process) {
                    return ["JS数据1", "JS数据2", "JS数据3"];
                },
                highlighter: function (item) {
                    return "==>" + item + "<==";
                },
                updater: function (item) {
                    console.log("'" + item + "' selected."); //浏览器控制台输出
                    $("#product_search").val(item);
                    return item;
                }
            });
        })
    </script>
    支持 Ajax 获取数据
    <div style="margin: 10px 50px">
        <label for="product_search">
            Product Search:
        </label>
        <input id="product_search_ajax" type="text" data-provide="typeahead">
    </div>
    <script type="text/javascript">
        $('#product_search_ajax').typeahead({
            source: function (query, process) {
                var parameter = { query: query };
                $.post('@Url.Action("AjaxService")', parameter, function (data) {
                    process(data);
                });
            }
        });
    </script>
    使用对象数据
    <div style="margin: 10px 50px">
        <label for="product_search">
            Product Search:
        </label>
        <input id="product_search_object" type="text" data-provide="typeahead">
    </div>
    <script type="text/javascript">
        $(function () {
            
            var products = [
            {
                id: 0,
                name: "object1",
                price: 499.98
            },
            {
                id: 1,
                name: "object2",
                price: 134.99
            },
            {
                id: 2,
                name: "object3",
                price: 49.95
            }
            ];

            $('#product_search_object').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> </div>

控制器

public ActionResult Index()
        {
            return View();
        }

        public ActionResult AjaxService()
        {
            string query = "";
            if (!string.IsNullOrWhiteSpace(Request["Query"]))
                query = Request["Query"].ToString();
            var data = ("AJAX1,AJAX2,AJAX3").Split(',');
            return Json(data);
        }

 效果:

 

 

 

相关文章
N..
|
7月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
68 0
|
前端开发 容器
|
前端开发 容器
|
前端开发 开发者 容器
|
5月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
7月前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码
|
7月前
|
前端开发
bootstrap组件
bootstrap组件
|
7月前
Bootstrap5 导航组件和面包屑
Bootstrap5 导航组件和面包屑
63 0
|
7月前
|
前端开发 JavaScript 容器
BootStrap 组件和样式
BootStrap 组件和样式
68 0
|
前端开发 容器