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

简介: 官方:http://twitter.github.io/typeahead.js/ 示例:http://twitter.github.io/typeahead.js/examples/(本文展示:Open Source Projects by Twitter) 项目源码:https://github.

官方:http://twitter.github.io/typeahead.js/

示例:http://twitter.github.io/typeahead.js/examples/(本文展示:Open Source Projects by Twitter)

项目源码:https://github.com/twitter/typeahead.js(点击Download ZIP下载typeahead.js-master.zip

1.实现

HTML

提示:examples.css为实例中的css文件

<link type="text/css" href="@Url.Content("~/Scripts/typeahead/examples.css")" rel="stylesheet"/>
<script src="@Url.Content("~/Scripts/typeahead/typeahead.js")"  type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/typeahead/hogan-2.0.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/typeahead/underscore-min.js")"  type="text/javascript"></script>
<div>
    <div style="margin: 10px 50px" class="col-md-3">
        <div class="form-group example-twitter-oss">
            <label class="col-md-4 control-label ">
                姓名</label>
            <div class="col-md-7">
                @Html.TextBox("InputName", "", new { @class = "inputName form-control", placeholder = "请输入姓名" })
            </div>
        </div>
    </div>
    @Html.Hidden("getInputName", Url.Action("GetInputName"))
    <script type="text/javascript">
        $('.inputName').typeahead({
            name: 'inputname',
            remote: $("#getInputName").val() + '/?query=%QUERY',
            template: ['<p class="repo-language">{{vipname}}</p>',
                       '<p class="repo-name">{{name}}</p>',
                       '<p class="repo-description">{{description}}</p>'
                       ].join(''),
            limit: 10,
            engine: Hogan
        });
    </script>
</div>

 

控制器

  #region 获取姓名提示下拉
        /// <summary>
        ///  获取姓名提示下拉
        /// </summary>
        /// <returns></returns>
        public ActionResult GetInputName(string query)
        {
            var list = new List<TypeaheadModel>();
            if (!string.IsNullOrWhiteSpace(query))
            {
                query = query.Trim();

                foreach (var item in GetData())
                {
                    if (item.name.Contains(query))
                    {
                        list.Add(item);
                    }
                }
            }
            return Json(list, JsonRequestBehavior.AllowGet);
        }
        #endregion


        public List<TypeaheadModel> GetData()
        {
            List<TypeaheadModel> list = new List<TypeaheadModel>();
            TypeaheadModel model = new TypeaheadModel();

            for (int i = 0; i < 5; i++)
            {
                model = new TypeaheadModel();
                model.description = "D";
                model.vipname = "V";
                model.name = "A" + i.ToString();
                model.value = "A" + i.ToString();//
                list.Add(model);
            }

            for (int i = 3; i < 10; i++)
            {
                model = new TypeaheadModel();
                model.description = "";
                model.vipname = "";
                model.name = "B" + i.ToString();
                model.value = "B" + i.ToString();
                list.Add(model);
            }

            return list;
        }

 

模型

public class TypeaheadModel
    {
        public string name { get; set; }
        public string vipname { get; set; }
        public string description { get; set; }
        /// <summary>
        /// 选中后文本框的值
        /// </summary>
        public string value { get; set; }
    }

 

 

2.效果:

 

 

相关文章
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
|
前端开发 容器