Twitter.Typeahead 在 asp.net mvc 5 中无法使用 bootstrap 3.00

Question

亲爱的，我已经安装了 Twitter.Typeahead 版本 0.11.1。它不工作。这是我的代码

<div class="form-group" style="display:none" id="serialNumber">
                                            <div class="tt-container">
                                                <label>Serial Number</label>
                                                <input class="typeahead form-control" id="SerialNumber" name="SerialNumber" type="text" value="" placeholder="Enter Serial Number Here.." />
                                            </div>                                                                          
                                        </div>
                                        <ul id="lstSerials" class="list-group"></ul>

下面是我的脚本

var sno = [];
        var serials = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: '/Sales/GetSerialNo?query=%QUERY',
                wildcard: '%QUERY'
            }
        });

        $('#SerialNumber').typeahead({ 
            minLength: 3,
            highlight: true,
            hint: true
        }, {
            name: 'serials',
            display: 'serialNumbers',
            source: serials
        }).on("typeahead:select", function (e, data) {
            $("#lstSerials").append("<li class='list-group-item'>" + data + "</li>");
            $("#SerialNumber").typeahead("val", "");
            sno.push(data);
        });

这是预先输入的样式

.twitter-typeahead .tt-query, .twitter-typeahead .tt-hint {
    margin-bottom: 0; }

.tt-hint {
    display: block;
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #999;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }

.tt-menu {
    min-width: 160px;
    margin-top: 2px;
    padding: 5px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box; }

.tt-suggestion {
    display: block;
    padding: 3px 20px;
    width: 100%; }

.tt-suggestion.tt-selectable {
    margin: 5px 0px 5px 0px; }

.tt-suggestion.tt-cursor {
    color: #fff;
    background-color: #428bca; }

.tt-suggestion.tt-cursor a {
    color: #fff; }

.tt-suggestion p {
    margin: 0; }

最后是控制器，出于测试目的我有一个静态数据

 public JsonResult GetSerialNo(string query)
        {
            List<string> lstTest = new List<string>();
            lstTest.Add("aaaHafiz");
            lstTest.Add("aaaSiddiq");
            lstTest.Add("aaaUmer");
            return Json(new { serialNumbers = lstTest }, JsonRequestBehavior.AllowGet);
        }

但是当我运行应用程序写了三个字后，我只得到一个值，这是不可见的，不知道为什么.. 检查也没有显示错误。这些图片中给出了示例输出错误：

When I type the keywords in the textbox
我只得到一个建议，而不是三个，而且当我看在这个外观和感觉上有多糟糕

Answer 1

您好，我已经对您的代码进行了更改，现在可以正常工作了。

我添加了return个序列号的过滤功能。

Script Reference

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/typeahead.js/typeahead.jquery.js"></script>
<script src="~/typeahead.js/bloodhound.min.js"></script>


<script>
        $(document).ready(function() {
            // Instantiate the Bloodhound suggestion engine
            var serials = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: 'http://localhost:49497/DemoType/GetSerialNo?query=%QUERY',
                    filter: function (data)
                    {
                        // Map the remote source JSON array to a JavaScript object array
                        return $.map(data.serialNumbers, function (serial)
                        {
                            return {
                                value: serial
                            };
                        });
                    }
                }
            });

            // Initialize the Bloodhound suggestion engine
            serials.initialize();

            // Instantiate the Typeahead UI
            $('.typeahead').typeahead(null, {
                displayKey: 'value',
                source: serials.ttAdapter()
            });

        });

    </script>

输出：-

Answer 2

最后我通过优化代码的 javascript 部分解决了这个问题，下面是我的代码

var sno = [];

            var serials = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '/Sales/GetSerialNo?query=%QUERY',
                    filter: function (data) {
                        return $.map(data.serialNumbers, function (serial) {
                            return { value: serial };
                        });
                    }
                }
            });

            serials.initialize();

            $('#SerialNumber').typeahead({ 
                hint: true,
                highlight: true,
                minLength: 3
            }, {
                limit: Infinity,
                displayKey: 'value',
                source: serials.ttAdapter()
            }).on("typeahead:select", function (e, data) {
                $("#lstSerials").append("<li class='list-group-item'>" + data.value + "</li>");
                $("#SerialNumber").typeahead("val", "");
                sno.push(data);
            });
        });

现在正在按预期工作 -谢谢

Twitter.Typeahead 在 asp.net mvc 5 中无法使用 bootstrap 3.00

Twitter.Typeahead is not working with bootsrap 3.00 in asp.net mvc 5

c#

asp.net

twitter

asp.net-mvc

typeahead.js