为什么预输入不适用于此 MVC5 应用程序？答案

【问题标题】：Why does typeahead not work for this MVC5 application?为什么预输入不适用于此 MVC5 应用程序？
【发布时间】：2015-02-25 01:35:25
【问题描述】：

问题

我无法为我的 MVC 5 应用程序实现 twitter typeahead。我可以输入文本，但没有提前输入或自动完成功能。

已安装 twitter typeahead api
实现了本地 javascript

更新

我尝试在fiddle 上实现"working" 示例。我确信如果我可以让这些示例正常工作，那么我的应用程序也可以吗？

尝试

我已经检查了 twitter api。我也看过几个教程。见下文：

Tutorial 1
Tutorial 2。

教程 2 包含的小提琴代码也不起作用，其行为与我的 MVC 应用程序类似。 See here for fiddle code。

代码

我的整个应用程序都有自己的存储库。你可以找到它here。我在这里包括我的独立视图。我确实使用共享布局来放入必要的 javascript。

我不确定为什么这不起作用（代码也来自教程），但非常感谢您的帮助。我无法发现任何明显的语法错误。

 @{
    ViewBag.Title = "TypeAhead";
}
<script>
    var substringMatcher = function (strs) {
        return function findMatches(q, cb) {
            var matches, substrRegex;

            // an array that will be populated with substring matches
            matches = [];

            // regex used to determine if a string contains the substring `q`
            substrRegex = new RegExp(q, 'i');

            // iterate through the pool of strings and for any string that
            // contains the substring `q`, add it to the `matches` array
            $.each(strs, function (i, str) {
                if (substrRegex.test(str)) {
                    // the typeahead jQuery plugin expects suggestions to a
                    // JavaScript object, refer to typeahead docs for more info
                    matches.push({ value: str });
                }
            });

            cb(matches);
        };
    };

    var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
      'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
      'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
      'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
      'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
      'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
      'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
      'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
      'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
    ];

    $('#the-basics .typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'states',
        displayKey: 'value',
        source: substringMatcher(states)
    });
</script>
<body>
    <div id="the-basics">
        <input class="typeahead" type="text" placeholder="States of USA">
    </div> 
</body>

【问题讨论】：

标签： javascript asp.net-mvc twitter-bootstrap typeahead.js

【解决方案1】：

如果您将 //twitter.github.com/typeahead.js/releases/latest/typeahead.jquery.min.js 添加到“外部资源”（左侧菜单）而不是 CSS 框（和 jquery.min)。

所以也许你的项目中也有类似的东西。也许调用 $(...).typeahead(...) 到

$(document).ready(function () { $(...).typeahead(...) })

【讨论】：

这解决了我的直接问题。我将尝试从控制器扩展这个接受 json 数据。无论如何，小提琴可能能够复制这种行为吗？也就是说，发布到不是控制器，而是某个地方的某个 api 并取回数据？一旦我确定我的 javascript 工作正常，然后移植到我的 MVC 应用程序？谢谢。
我不这么认为，但是您可以通过在代码中添加 console.log(msg) 并检查 js 控制台来查看发生了什么（右键单击，在浏览器中“检查某些内容”） .
是的，我用了console.log，马上就发现一大堆新问题。我花了很多时间。请看这里：bit.ly/1wqBDPM