Question

我使用Twitter typeahead使我的搜索栏工作但遇到一些问题。

搜索栏的用途：

搜索栏将用于搜索注册到网站的用户的用户名。

方法：

head的{{1}}：

home.php

<script src="typeahead.min.js"></script>（包含在header.php中）：

home.php

<input type="text" class="form-control" placeholder="Search user" name="typeahead"> <script> $(document).ready(function(){ $('input.typeahead').typeahead({ name: 'typeahead', remote:'search.php?key=%QUERY', limit : 10 }); }); </script>：

search.php

当前结果：

如果使用上面的代码，在<?php include("connect.php"); $key=$_GET['key']; $array = array(); $query = mysqli_query("SELECT * FROM users WHERE username LIKE '%{$key}%'"); while($row=mysqli_fetch_assoc($query)){ $array[] = $row['username']; } echo json_encode($array); ?>我尝试搜索用户home.php，他是真正的用户（顺便说一句，我没有点击搜索，我只是输入她的名字在搜索栏中。我希望，如果Alice是真实用户，她的名字将显示在下拉列表中）。但如果我搜索她的网址发生了变化。

要点：如果我输入Alice（不要按搜索），则没有任何反应。我希望下拉显示为Alice是真正的用户名。

如果我输入Alice并且DO单击搜索按钮，则URL将更改为：

Alice

我希望它如何运作

修改：

我在http://localhost/home.php?typeahead=Alice尝试的另一种方法：

header.php

Github采用了以下方法。

使用这种方法，我仍然没有得到一个显示任何匹配名称的下拉列表。

Answer 1

问题在于您对typeahead的声明。预先输入不能直接使用远程源。它必须通过功能或通过猎犬对象提供。

如果您查看documentation for typeahead，则会看到remote没有设置。

examples page有一些好主意也可以作为开始的地方。

我喜欢使用bloodhound object，但它确实让事情变得复杂。

创建猎犬对象：

var taSource = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  identify: function(obj) {
    return obj.Value;
  },
  remote: todos
});

我将remote对象哈希分开：

var todos = {
  url: urlRoot + '/todos',
  prepare: function(query, settings) {
    settings.url += '?q=' + query;
    return settings;
  },
  filter: function(data) {
    return $.map(data, function(obj) {
        console.log(obj)
        return {
        Id: obj.id,
        Value: obj.title
      };
    });
  }
};

因此，typeahead声明如下所示：

$('#search-input').typeahead({
  hint: true,
  highlight: true,
  minLength: 3
}, {
  name: 'myMatches',
  source: taSource,
  display: 'Value'
});

在这种情况下，我搜索JSON中的title，它被映射回传递给typeahead的对象中的Value。 JSON实际上看起来像这样：

[
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
  {
    "userId": 1,
    "id": 2,
    "title": "quis ut nam facilis et officia qui",
    "completed": false
  },
  {
    "userId": 1,
    "id": 3,
    "title": "fugiat veniam minus",
    "completed": false
  },
  {
    "userId": 1,
    "id": 4,
    "title": "et porro tempora",
    "completed": true
  }...

这是a fiddle demo。

使用Twitter typeahead使搜索栏工作

1 个答案: