0

我正在尝试使用 bootstrap 2.2.2 typeahead，根据文档可以将其配置为 Source 选项的某些功能。

    $('#test').typeahead({           
        source: function (query, process) {
            return $.get('@Url.Action("Search")', { query: query }, function (data) {
                return process(data);
            });
        }
    });

这就是我正在尝试的。

我的服务器端有简单的动作

    public ActionResult Search(string query)
    {
        var teamMembers = new List<String>();
        for (int i = 1; i < 21; i++)
        {
            var teammember = "john doe + ( " + i +" )";                                    
            teamMembers.Add(teammember);
        };

        return new JsonResult()
        {
            Data = teamMembers.ToArray(),
            JsonRequestBehavior = JsonRequestBehavior.AllowGet
        };
    }

没有比这更简单的了，但我的“搜索”操作根本没有受到影响。如果有人可以指导我做错了什么，TypeAhead 如何通过某些异步设置的 Source 来精确调用控制器 Action。仅使用 bootstrape 2.2.2 本机组件的功能。如果需要任何澄清，请告诉我。

静态数据工作得很好，所以显然这里没有我丢失的文件。您也可以在下面的标记中看到。

    <input type="text" data-provide="typeahead"                                 
            data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>

PS 请不要提及任何 typeahead 分叉，我只是想知道 twitter bootstrap 2.2.2 本机 typeAhead 功能。

更新：完整代码 HomeController

    public class HomeController : Controller
    {
    public ActionResult Index()
    {
        return View();
    }        

    public ActionResult TypeAhead(string query)
    {
        var teamMembers = new List<String>();
        for (int i = 1; i < 21; i++)
        {
            var teammember = "john doe + ( " + i +" )";                                    
            teamMembers.Add(teammember);
        };

        return new JsonResult()
        {
            Data = teamMembers.ToArray(),
            JsonRequestBehavior = JsonRequestBehavior.AllowGet
        };
    }        
}

我当前的视图标记。

    <script src="~/Scripts/jquery-1.7.1.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />

    <script type="text/javascript">

      $(document).ready(function() {

          $('#testSearch').typeahead({
              source: function (query, process) {
                  $.get('@Url.Action("TypeAhead")', { query: query }, function(data) {
                     process(data);
                  });
               }
          });        
      });

    </script>


    <ol class="round">               
      <li class="three">
        <input id="testSearch" data-provide="typeahead" >
     </li>        
   </ol>
4

1 回答 1

0

你的代码对我来说很好。

我创建了一个全新的项目，从 nuget 获得了 twitter bootstrap 2.2.2，并将以下代码添加到索引视图中。

<input type="text" id="test" data-provide="typeahead"/>

<script>
$('#test').typeahead({
    source: function (query, process) {
        return $.get('@Url.Action("Search")', { query: query }, function (data) {
            return process(data);
        });
    }
});
</script>

然后我将您的搜索方法复制并粘贴到家庭控制器中

在文本框中输入字母 J 和 O 后，预输入功能按预期工作。

一定有其他东西给你带来了问题。

您是否使用网络检查器或 fiddler 之类的工具检查了当您在文本框中键入时是否向正确的搜索端点发出请求？

如果您创建一个新项目，它对您有用吗？

您可以在此处发布您认为的完整代码吗？

于 2013-02-13T12:38:58.580 回答