为什么typeahead不能用于这个MVC5应用程序?

时间:2015-02-25 01:35:26

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

问题

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

  • 已安装twitter typeahead api
  • 实施本地javascript

更新

我尝试在"working"上实施fiddle示例。我相信如果我可以让这些例子工作,那么我的申请也是如此?

尝试

我检查过twitter api。我也看过几个教程。 见下文:

教程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>

1 个答案:

答案 0 :(得分:1)

如果你在“外部资源”(左侧菜单)中添加//twitter.github.com/typeahead.js/releases/latest/typeahead.jquery.min.js而不是在css框中(

小提琴正在工作)并使用jquery.min)。

所以也许你的项目也有类似的东西。 也许将$(...)。typeahead(...)称为

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