第六章 使用 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.效果：