Javascript 引导typeahead在MVC 5中不起作用

在我的mvc项目中，我试图实现自动完成，但它不起作用（打字机），我做的每件事都是对的，但无法实现。下面是我的代码。有人能帮忙吗

<script type="text/javascript">
$(document).ready(function () {

    $("#Search").typeahead({
        source: function (query, process) {
            var countries = [];
            map = {};

            // This is going to make an HTTP post request to the controller
            return $.post('/Registration/GetPossibleLocations', { query: query }, function (data) {

                // Loop through and push to the array
                $.each(data, function (i, country) {
                    map[country.Name] = country;
                    countries.push(country.Name);
                });

                // Process the details
                process(countries);
            });
        },
        updater: function (item) {
            var selectedShortCode = map[item].ShortCode;

            // Set the text to our selected id
            $("#details").text("Selected : " + selectedShortCode);
            return item;
        }
    });

});

$（文档）.ready（函数（）{
$（“#搜索”）.typeahead({
来源：功能（查询、流程）{
var国家=[]；
map={}；
//这将向控制器发出HTTP post请求
返回$.post（'/Registration/GetPossibleLocations'，{query:query}，函数（数据）{
//循环并推送到阵列
美元。每个（数据、功能（i、国家）{
地图[国家名称]=国家；
countries.push（country.Name）；
});
//处理细节
进程（国家）；
});
},
更新程序：函数（项）{
var selectedShortCode=map[item].ShortCode；
//将文本设置为所选id
$（“#详细信息”）.text（“选定：”+selectedShortCode）；
退货项目；
}
});
});

---

我更喜欢使用猎犬集成来获取我的数据源。这是我如何使用它的一个例子：

捆绑包：

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/layoutScriptsBundle").Include(
            "~/_js/_lib/jquery/jquery-{version}.js",
            "~/_js/_lib/bootstrap/bootstrap.js",
            "~/_js/_lib/typeahead.js/typeahead.bundle.js",
            "~/_js/_lib/handlebars.js/handlebars-v1.3.0.js"));

        bundles.Add(new StyleBundle("~/bundles/css/libs/layoutStylesBundle").Include(
            "~/_css/_lib/bootstrap/bootstrap.css",
            "~/_css/_lib/typeahead.js/typeahead.js-bootstrap.css"));
    }
}

JavaScript:

<script>
    window.siteNS = window.siteNS || {};
    jQuery(document).ready(function ($) {
        siteNS.typeaheadRemoteUrl = '@Url.ActionFor((ExampleController c) => c.GetTypeaheadData(null))?q=%QUERY';

        var myTypeaheadData = new Bloodhound({
            datumTokenizer: function (d) {
                return Bloodhound.tokenizers.whitespace(d.value);
            },
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: siteNS.typeaheadRemoteUrl,
                rateLimitWait: 250,
                ajax: { cache: false }
            }
        });

        myTypeaheadData.initialize();

        $('#myTypeahead').typeahead({
            autoselect: true,
            highlight: true,
            hint: true,
            minLength: 1
        }, {
            source: myTypeaheadData.ttAdapter(),
            name: 'myTypeaheadDatasetName',
            displayKey: 'ItemName',
            templates: {
                empty: '',
                footer: '',
                header: '',
                suggestion: Handlebars.compile('<p>{{ItemName}} - {{ItemID}}</p>')
            }
        });
    });
</script>

window.siteNS=window.siteNS |{}；
jQuery（文档）.ready（函数（$）{
siteNS.typeaheadRemoteUrl='@Url.ActionFor（（ExampleController）=>c.GetTypeaheadData（null））？q=%QUERY'；
var myTypeaheadData=新猎犬({
datumTokenizer:函数（d）{
return Bloodhound.tokenizers.whitespace（d.value）；
},
queryTokenizer:猎犬，标记，空白，
远程：{
url:siteNS.typeaheadmoteurl，
等一下：250，
ajax:{cache:false}
}
});
myTypeaheadData.initialize（）；
$（“#myTypeahead”）。typeahead({
自动选择：正确，
推荐理由：没错，
提示：没错，
最小长度：1
}, {
来源：myTypeaheadData.ttAdapter（），
名称：“myTypeaheadDatasetName”，
displayKey:'ItemName'，
模板：{
空：“”，
页脚：“”，
标题：“”，
建议：handlebar.compile（“{{ItemName}}-{{ItemID}
”）
}
});
});

HTML:

搜索/自动完成
使用typeahead.js

我更喜欢使用猎犬集成来获取我的数据源。这是我如何使用它的一个例子：

捆绑包：

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/layoutScriptsBundle").Include(
            "~/_js/_lib/jquery/jquery-{version}.js",
            "~/_js/_lib/bootstrap/bootstrap.js",
            "~/_js/_lib/typeahead.js/typeahead.bundle.js",
            "~/_js/_lib/handlebars.js/handlebars-v1.3.0.js"));

        bundles.Add(new StyleBundle("~/bundles/css/libs/layoutStylesBundle").Include(
            "~/_css/_lib/bootstrap/bootstrap.css",
            "~/_css/_lib/typeahead.js/typeahead.js-bootstrap.css"));
    }
}

JavaScript:

<script>
    window.siteNS = window.siteNS || {};
    jQuery(document).ready(function ($) {
        siteNS.typeaheadRemoteUrl = '@Url.ActionFor((ExampleController c) => c.GetTypeaheadData(null))?q=%QUERY';

        var myTypeaheadData = new Bloodhound({
            datumTokenizer: function (d) {
                return Bloodhound.tokenizers.whitespace(d.value);
            },
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: siteNS.typeaheadRemoteUrl,
                rateLimitWait: 250,
                ajax: { cache: false }
            }
        });

        myTypeaheadData.initialize();

        $('#myTypeahead').typeahead({
            autoselect: true,
            highlight: true,
            hint: true,
            minLength: 1
        }, {
            source: myTypeaheadData.ttAdapter(),
            name: 'myTypeaheadDatasetName',
            displayKey: 'ItemName',
            templates: {
                empty: '',
                footer: '',
                header: '',
                suggestion: Handlebars.compile('<p>{{ItemName}} - {{ItemID}}</p>')
            }
        });
    });
</script>

window.siteNS=window.siteNS |{}；
jQuery（文档）.ready（函数（$）{
siteNS.typeaheadRemoteUrl='@Url.ActionFor（（ExampleController）=>c.GetTypeaheadData（null））？q=%QUERY'；
var myTypeaheadData=新猎犬({
datumTokenizer:函数（d）{
return Bloodhound.tokenizers.whitespace（d.value）；
},
queryTokenizer:猎犬，标记，空白，
远程：{
url:siteNS.typeaheadmoteurl，
等一下：250，
ajax:{cache:false}
}
});
myTypeaheadData.initialize（）；
$（“#myTypeahead”）。typeahead({
自动选择：正确，
推荐理由：没错，
提示：没错，
最小长度：1
}, {
来源：myTypeaheadData.ttAdapter（），
名称：“myTypeaheadDatasetName”，
displayKey:'ItemName'，
模板：{
空：“”，
页脚：“”，
标题：“”，
建议：handlebar.compile（“{{ItemName}}-{{ItemID}
”）
}
});
});

HTML:

搜索/自动完成
使用typeahead.js

类型先行（）至少等待两个参数。第一个参数是一个选项数组，然后可以定义多个数据集。源代码必须在数据集中定义

有关用法，请参见：

正如文档所述，

源代码必须计算建议集（即JavaScript对象数组）以进行查询。您正在传递一个字符串数组。
除此之外，还必须设置
displayKey

如果您在文本字段中写入内容，将首次执行
源代码

我为你做了一把小提琴：

您的代码应该如下所示：

<script type="text/javascript">
$(document).ready(function () {
  // Notice the first empty object. You can specify options in it.
  $("#Search").typeahead({}, {
      displayKey: 'Name',
      source: function (query, process) {
          var countries = [];
          map = {};

          // This is going to make an HTTP post request to the controller
          return $.post('/Registration/GetPossibleLocations', { query: query }, function (data) {

              // Loop through and push to the array
              $.each(data, function (i, country) {
                  map[country.Name] = country;
                  // You have to create an array of JS objects. 
                  // Typeahead will use the displayKey to fetch data from the object.
                  countries.push({'Name': country.Name});
              });

              // Process the details
              process(countries);
          });
      },
      ...        
  });

});


$（文档）.ready（函数（）{
//请注意第一个空对象。您可以在其中指定选项。
$（“#搜索”）.typeahead（{}{
displayKey:'名称'，
来源：功能（查询、流程）{
var国家=[]；
map={}；
//这将向控制器发出HTTP post请求
返回$.post（'/Registration/GetPossibleLocations'，{query:query}，函数（数据）{
//循环并推送到阵列
美元。每个（数据、功能（i、国家）{
地图[国家名称]=国家；
//您必须创建一个JS对象数组。
//Typeahead将使用displayKey从对象获取数据。
countries.push（{'Name'：country.Name}）；
});
//处理细节
进程（国家）；
});
},
...        
});
});

该
typeahead（）
至少等待两个参数。第一个参数是一个选项数组，然后可以定义多个数据集。源代码必须在数据集中定义

有关用法，请参见：

正如文档所述，
源代码必须计算建议集（即数组
please remove autocomplete="off" from tag  


    <div>
    <input type="text" id="Search" data-provide="typeahead" placeholder="Country" />    
    </div>