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

官方：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.效果：