Bootstrap 预输入在 MVC 5 中不起作用

Question

在我的 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;
        }
    });

});

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript">     </script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js" type="text/javascript"></script>

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

Answer 1

typeahead() 至少等待两个参数。第一个参数是一个选项数组，然后您可以定义多个数据集。 source 必须在数据集中定义。

查看用法：https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#usage

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

如果您在文本字段中写入内容，source 将首次执行。

我为你做了一个小提琴：http://jsfiddle.net/dtengeri/EhJvB/

您的代码应如下所示：

<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);
          });
      },
      ...        
  });

});

Answer 2

我更喜欢使用 Bloodhound 集成来获取我的数据源。这是我如何使用它的示例：

捆绑包：

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>

HTML：

<div class="form-group">
    <label class="control-label col-lg-4">Search/Autocomplete</label>
    <div class="col-lg-8 myTypeaheadContainer">
        <input id="myTypeahead" type="text" class="form-control">
        <span class="help-block">Using typeahead.js</span>
    </div>
</div>

Answer 3

试试这个

please remove autocomplete="off" from tag  


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