个人中心
gpt4 book ai didi

jquery - twitter.typeahead.js 在 asp.net core mvc 项目中不起作用

转载 作者：行者123 更新时间：2023-12-01 04:00:38 28 4
gpt4 key购买 nike

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

<!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

凉亭.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
}

最佳答案

让我们开始吧:P

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

TypeAhead 版本 1.1.1网址: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>

关于jquery - twitter.typeahead.js 在 asp.net core mvc 项目中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45410182/

28 4 0
文章推荐： oracle - [Oracle][ODBC][Ora]ORA-12170 : TNS:Connect timeout occurred ERROR [IM006] [Microsoft][ODBC Driver Manager] Driver's SQLSetConnectAttr failed
文章推荐： python - 使用 joblib 将结果返回给父进程
文章推荐： JPA 多重连接
文章推荐： jquery - 显示于 'checked'
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com