javascript – 使用TypeAhead和jQuery和Bootstrap 2.1

前端之家收集整理的这篇文章主要介绍了javascript – 使用TypeAhead和jQuery和Bootstrap 2.1前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在版本 2.1 of Twitter Bootstrap中,能够在Typeahead选项 was added中传递一个回调函数.但是,我一直困扰着使用jQuery ajax调用.

这是我到目前为止.

HTML

<form class="form-horizontal" action="">
    <fieldset>
        <div class="control-group">
            <label class="control-label" for="myTypeahead">User</label>
            <div class="controls">
                <input type="text" id="myTypeahead" />
            </div>
        </div>
    </fieldset>
</form>

JavaScript(设置在jQuery $(document).ready函数中)

$("#myTypeahead").typeahead({
  source: function (query,process) {
    $.ajax({
      type: "POST",url: ServiceURL + "/FindUsers",data: "{ SearchText: '" + query + "' }",contentType: "application/json; charset=utf-8",dataType: "json",success: function (r1) {
        var users = [];
        if (r1.d.Records) {
          $(r1.d.Records).each(function (index,val) {
            users.push(val.User.Name);
          });
          console.log(users);
          process(users);
        }
      }
    });
  }
});

当在Typeahead输入中键入test(或Test)时,不会显示Typeahead结果,但是从users变量记录的数据如下所示:

["Test User A","Test User B","Test User C","Test User D","Test User E","Test User F"]

为什么这不工作?

另外,作为参考,这里是Typeahead JavaScript for Bootstrap.

解决方法

我想到了. HTML表单(问题中列出)显示在一个模态对话框中,而Typeahead结果div出现在模态对话框的后面.

结果是结果被返回和显示,但是类型头结果容器刚刚不可见.

要修复它,我添加了这个CSS:

.typeahead {
    z-index: 1100;
}
原文链接:https://www.f2er.com/jquery/152703.html

猜你在找的jQuery相关文章