twitter.typeahead.js 在 asp.net 核心 mvc 项目中不起作用

Question

我正在开发一个 asp.net mvc 项目，该项目将在搜索框下方键入内容之前显示相关的搜索结果。我在项目中添加了 twitter.typeahead.js with bower 包管理器。这是我的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>  
    <script src="~/lib/typeahead.js/dist/typeahead.bundle.js"></script>
    <title></title>
</head>
<body>
    <div id="bloodhound">
        <input class="typeahead" type="text" placeholder="States of USA">
    </div>

</body>
</html>

<script type="text/javascript">

    $(document).ready(function () {
        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'
        ];

        var states = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.whitespace,
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            // `states` is an array of state names defined in "The Basics"
            local: states
        });

        $('#bloodhound .typeahead').typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        },
            {
                name: 'states',
                source: states
            });
    });
</script>

现在报错

Use of getPreventDefault() is deprecated.Use defaultPrevented instead. TypeError: $(...).typeahead is not a function. jQuery.Deferred exception: $(...).typeahead is not a function @http://localhost:54331/Home/Search:85:9 j@https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js:2:29997 g/https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js:2:30313 undefined

bower.json

{
  "name": "typeahead.js",
  "version": "0.11.1",
  "main": "dist/typeahead.bundle.js",
  "dependencies": {
    "jquery": ">=1.7"
  },
  "devDependencies": {
    "jquery": "~1.7",
    "jasmine-ajax": "~1.3.1",
    "jasmine-jquery": "~1.5.2"
  },
  "homepage": "https://github.com/twitter/typeahead.js",
  "_release": "0.11.1",
  "_resolution": {
    "type": "version",
    "tag": "v0.11.1",
    "commit": "87de059a7820b1e223f1c704fa12a624dbce3a4f"
  },
  "_source": "https://github.com/twitter/typeahead.js.git",
  "_target": "v0.11.1",
  "_originalSource": "typeahead.js",
  "_direct": true
}

Answer 1

让我们开始工作吧:P

演示: https://jsfiddle.net/ipsjolly/6ydvth9q/1/

TypeAhead 版本 1.1.1 URL: https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.1.1/typeahead.jquery.min.js

jQuery是最新的

来源: http://twitter.github.io/typeahead.js/examples/

TypeScript 代码没有 Bloodhound 我不知道为什么这是为了 :D

HTML

<div id="the-basics">
  <input class="typeahead" type="text" placeholder="States of USA">
</div>

JS

<script type="text/javascript">
    var substringMatcher = function(strs) {
        return function findMatches(q, cb) {
            var matches, substringRegex;

            // 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)) {
                    matches.push(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',
        source: substringMatcher(states)
    });
</script>

Answer 2

澄清一下，Bloodhound 不是问题所在。

Bloodhoud 是 typeahead.js 建议引擎

在此 stack overflow answer 上添加了一个 jsfiddle，它与 bloodhound 完美配合。

我还创建了一个 jsfiddle 更新版本的 typhead bloodhound 和 jquery 版本

Jquery: 3.2.1 Typehead: 1.1.1

您可以为您的项目试用这个版本

const suggestions = [{
    value: 'bloodhound1'
}, {
    value: 'bloodhound2'
}, {
    value: 'bloodhound3'
}, {
    value: 'typeahead1'
}, {
    value: 'typeahead2'
}]

var bloodhoundSuggestions = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    sufficient: 3,
    local: suggestions
});

const $tagsInput = $('#tagsInput')
$tagsInput.typeahead({
    hint: true,
    highlight: true,
    minLength: 1
}, {
    name: 'suggestions',
    displayKey: 'value',
    source: bloodhoundSuggestions
});

twitter.typeahead.js 在 asp.net 核心 mvc 项目中不起作用

twitter.typeahead.js doesn't work in asp.net core mvc project

jquery

asp.net-core-mvc

twitter-typeahead