使用 jQuery.TypeAhead 让文本框自动完成 （四）（自定义模板）

项目地址：https://github.com/twitter/typeahead.js

 

直接贴代码了：

@section headSection
{
    <script type="text/javascript">
    $(document).ready(function () {
        var bestPictures = new Bloodhound({
          datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          identify: function(obj) { return obj.id; } /* 这个函数是告诉引擎对象的 ID */,
          remote: {
            url: '@Url.Action("Trade_Code_List_Search_By_Trad_Cod")?searchTradCode=%QUERY',
            wildcard: '%QUERY'
          }
        });

        $('#trad_cod_textbox').typeahead(null,{
            name: 'best-pictures',
            source: bestPictures,
            display: 'value',
            limit: 10,
            templates: {
                suggestion: Handlebars.compile('<div><strong>{{id}}</strong> – {{value}}</div>'),
                empty: [
                  '<div class="empty-message">',
                    'unable to find any Best Picture winners that match the current query',
                  '</div>'
                ].join('\n')
            }
        }).bind('typeahead:select', function(ev, suggestion) {
            alert("you select: " + "(id=" + suggestion.id + ", value="+ suggestion.value +")"); //绑定自定义事件
        });
    });
    </script>
}
@Html.Partial("UCjQueryTypeAheadJsScript")

<!-- 这里就是文本框 -->
<input id="trad_cod_textbox" class="text-input" type="text" value="">

 

UCjQueryTypeAheadJsScript.cshtml（注意：多个一个JS）

<!-- both bloodhound.js and typeahead.jquery.js have a dependency on jQuery 1.9+. -->
<!-- 下面这个 handlebars.js 当需要用 typeahead 的 templates suggestion 时必须要，否则可选  -->
<script src="~/resources/plugins/jQuery-type-ahead.js/handlebars.js"></script>
<script src="~/resources/plugins/jQuery-type-ahead.js/typeahead.bundle.min.js"></script>
<link href="~/resources/plugins/jQuery-type-ahead.js/examples.css" rel="stylesheet" />

 

Controller.cs

        public ActionResult Trade_Code_List_Search_By_Trad_Cod(string searchTradCode)
        {
            List<Trd_Mas_Simple_Info> simpleTradMasList = new Trd_MasService().GetSimpleListByTradCode(searchTradCode);
            return Json(simpleTradMasList.Select(c => new
            {
                value = c.trd_cod + " - " + c.trd_des,
                id = c.trd_cod
            }), JsonRequestBehavior.AllowGet);
        }

 

examples.css

.tt-query { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
.tt-hint { color: #999 }
.tt-menu { width: 422px; margin: 12px 0; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); }
.tt-suggestion { padding: 3px 20px; font-size: 18px; line-height: 24px; }
.tt-suggestion:hover { cursor: pointer; color: #fff; background-color: #0097cf; }
.tt-suggestion.tt-cursor { color: #fff; background-color: #0097cf; }
.tt-suggestion p { margin: 0; }
.gist { font-size: 14px; }

 

运行效果

 

谢谢浏览！