Twitterの先読みを使用して検索バーの仕事をする

Question

私は検索バーを機能させるのにいくつかの問題を克服するためにTwitterの先読みを使用しています。検索バーの

目的は：

検索バーは、サイトに登録しているユーザーのユーザー名を検索するために使用されます。

アプローチ：（home.phpに含まれる）

<script src="typeahead.min.js"></script> 

header.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：

headhome.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が実際のユーザー名であるためにドロップダウンが表示されることを期待しています。

私はアリスを入力し、検索ボタンをクリックしない場合、に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

問題は先読みの宣言にあります。先読みは、リモートソースを直接使用することはできません。それは、関数を介して提供されるか、または血痕オブジェクトを介して提供される必要があります。

documentation for typeaheadをチェックすると、remoteの設定がないことがわかります。

examples pageには、開始するための良いアイデアがいくつかあります。

私はbloodhound objectを使用しますが、少し複雑です。

ブラッドハウンドのオブジェクトを作成します。私はこの場合

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

：私は私のremoteオブジェクトのハッシュを分離

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

を：

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 
     }; 
    }); 
    } 
}; 

だから、先行入力の宣言は次のようになりますマップされたJSONのtitleを検索していますck〜Valueをtypeaheadに渡したオブジェクトに置き換えます。 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です。

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.