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

我正在研究一個asp.net mvc項目，該項目將在搜索框下面顯示相關的搜索結果。我在項目中添加了twitter.typeahead.js和bower包管理器。這裏是我的代碼twitter.typeahead.js在asp.net核心mvc項目中不起作用

<!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 [email protected]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 
}

來源

2017-07-31 Mohit K. Bhowmik

嘗試jQuery的1.10版進行測試，如果出現錯誤？ –

它說「jQuery沒有定義」，也是「$沒有定義」後嘗試！ –

@ MohitK.Bhowmik你已經嘗試過jQuery 1.1的** src **嗎？ – MJK

讓我們得到這個工作：P

DEMO：https://jsfiddle.net/ipsjolly/6ydvth9q/1/

預輸入版本1.1.1 網址：https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.1.1/typeahead.jquery.min.js

打字稿代碼是沒有警犬我不知道這是爲什麼了： D

HTML

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

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

來源

2017-07-31 10:33:59

只是爲了澄清，尋血獵犬不是問題。

Bloodhoud是typeahead.js建議引擎

有一個的jsfiddle加入這個stack overflow answer，與警犬完美。

我也創建一個jsfiddle與更新版本typhead警犬和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 
});

來源

2017-07-31 12:25:46 MJK

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

回答

相關問題