使用Twitter提前使搜索欄工作

Question

我正在使用Twitter提前輸入法使搜索欄工作，但遇到了一些問題。

搜索欄的目的 ：

搜索欄將用於搜索注冊到該站點的用戶的用戶名。

方法 ：

在home.php的head ：

<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 （我沒有順便點擊搜索，我只是在搜索欄中輸入她的名字。我希望，如果愛麗絲是一個真實的用戶，她的名字將顯示在下拉列表中。 但是，如果我搜索她，URL就會更改。

摘要：如果鍵入Alice（不要按搜索），則什么都不會發生。 我希望下拉列表會出現，因為Alice是真實的用戶名。

如果我鍵入Alice並單擊搜索按鈕，則URL更改為：

http://localhost/home.php?typeahead=Alice

我希望它如何工作：

編輯 ：

我在header.php嘗試的另一種方法：

<input type="text" class="form-control" placeholder="Search user" name="typeahead">

<?php  
// getting all usernames from db
        $statement = mysqli_prepare ($connect, "SELECT * FROM users WHERE account_type ='user'");
        mysqli_stmt_execute($statement);
        $usernames = array();
        $result = mysqli_stmt_get_result($statement);
        while($get_data = mysqli_fetch_assoc ($result)){
            $usernames[]       = $get_data['username'];
        }
        mysqli_stmt_close($statement);     
    ?>

<script>
    var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var username = <?php echo json_encode($usernames); ?>;

$('#the-basics .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'usernames',
  source: substringMatcher(username)
});
    </script>

Github已采用以下方法。

使用這種方法，我仍然無法獲得顯示任何匹配名稱的下拉列表。

Answer 1

問題出在您的預告聲明中。 提前輸入不能直接使用遠程源。 它必須通過功能或通過獵犬來提供。

如果您查看有關提前輸入的文檔 ，將會看到沒有設置remote 。

示例頁面也有一些不錯的主意，可作為起點。

我喜歡使用獵犬的對象 ，但這確實使事情變得復雜。

創建獵犬對象：

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 ，該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
  }...

這是一個小提琴演示 。