网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
内容
    这篇文章主要介绍了Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    页面代码：
    @{
    ViewBag.Title = "Index";
    }
    <script src="Scripts/bootstrap-typeahead.js"></script>
    <script src="Scripts/underscore-min.js"></script>
    <div>
    简单使用
    <div>
    <label for="product_search">
    Product Search:
    </label>
    <input id="product_search" type="text" data-provide="typeahead" data-source='["DATA1", "DATA2", "DATA3"]' />
    </div>
    使用脚本填充数据
    <div>
    <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>
    <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>
    <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);
    }
    效果图展示如下：
    名单
    以上所述是小编给大家介绍的Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果，希望对大家有所帮助
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/17 16:29:22