Bootstrap 自动完成预键入搜索，使用自动调用故障排除

dced5bon 于 2023-11-15 发布在 Bootstrap

关注(0)|答案(2)|浏览(125)

我试图使用一个文本输入作为一个搜索框，检索搜索结果，通过aplog调用，使用引导typeahead插件

<form class="form-inline ml-3" action="/phone-autocomplete/">
    <div class="input-group input-group-sm">
        <input class="form-control form-control-navbar typeahead" data-provide="typeahead" autocomplete="off"
         id="phone-autocomplete" type="search" name="searchstring" placeholder="search phone" aria-label="Search">
        <div class="input-group-append">
            <button class="btn btn-navbar" type="submit">
                <i class="fas fa-search"></i>
            </button>
        </div>
    </div>
</form>

字符串
我的数据源返回一个text/xml响应，如下所示：

[ "9876124", "9812124","9875124",]

型
我的JavaScript，包括所有必需的包后，如下所示：

$('#phone-autocomplete').typeahead({
        source: function (query, process) {
            return $.get('/phone-autocomplete/', { searchstring: query }, function (data) {
                console.log(data);
                return process(data);
            });
            
        },
        'updater' : function(item) {
            this.$element[0].value = item;
            console.log(item);
            this.$element[0].form.submit();
            return item;
        }
    });
      
</script>

型
其目的是让搜索输入在用户每次键入字符时发送一个请求，并返回一个更新的项目列表
我的问题是它只适用于一个数字，然后它停止显示出于某种原因
这是使用bootstrap3-typeahead.min.js包
谢谢

twitter-bootstrap

来源：https://stackoverflow.com/questions/77425451/autocomplete-typeahead-search-using-ajax-calls-troubleshooting

2条答案

按热度按时间

woobm2wo1#

您的Ajax调用一定有问题，因为typeahead似乎在搜索框中输入每个字符时都会更新，请参阅演示：

//
$('#phone-autocomplete').typeahead({
  source: function(query, process) {
    data = ["9876124", "9812124", "9875124", ];
    console.log(`Ajax call with query: ${query}`);
    return process(data);
  },
  'updater': function(item) {
    this.$element[0].value = item;
    console.log(item);
    this.$element[0].form.submit();
    return item;
  }
});

个字符
下面的演示展示了如何从Ajax调用中获取输出（注意：我将Ajax async设置为false）。
参见：https://api.jquery.com/jQuery.get/

//
$.ajaxSetup({
  async: false,
});
$('#phone-autocomplete').typeahead({
  source: function(query, process) {
    console.log(`Ajax call with query: ${query}`);
    var data = [];
    $.get("example.php", function(data) {
        //alert("success");
      })
      .done(function() {
        //alert("second success");
      })
      .fail(function() {
        //alert("error");
      })
      .always(function() {
        //alert("finished");
        data = ["9876124", "9812124", "9875124", ];
        console.log(`data = ${data}`);
      });
    return process(data);
  },
  'updater': function(item) {
    this.$element[0].value = item;
    console.log(item);
    this.$element[0].form.submit();
    return item;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>

<form class="form-inline ml-3" action="/phone-autocomplete/">
  <div class="input-group input-group-sm">
    <input class="form-control form-control-navbar typeahead" data-provide="typeahead" autocomplete="off" id="phone-autocomplete" type="search" name="searchstring" placeholder="search phone" aria-label="Search">
    <div class="input-group-append">
      <button class="btn btn-navbar" type="submit">
                <i class="fas fa-search"></i>
            </button>
    </div>
  </div>
</form>

你只需要去掉

data = ["9876124", "9812124", "9875124", ];
console.log(`data = ${data}`);

型
从always回调函数，并填充data在done回调。希望这有帮助！

赞(0）回复(0）举报 2023-11-15

yuvru6vn2#

我解决了这个问题，显然，将远程响应的MIME类型设置为application/json是最基本的，输出文本字符串或HTML不起作用，并默默失败

赞(0）回复(0）举报 2023-11-15

我来回答

Bootstrap 自动完成预键入搜索，使用自动调用故障排除

2条答案

相关问题

热门标签

最新问答