JS filter/autocomplete

Question

JSONオブジェクトの文字列に基づいてオートコンプリート/フィルタ機能を使用するために、自分のサイトに検索フィールドを取得しようとしています。 JSONオブジェクト内にある可能性のあるものを除外する方法として検索ボックスを扱いたいと思います。

ここでは、HTMLでの検索バーです：

<form id="searchProducts"> 
<input type="text" class="md-input label-fixed" name="srch-term" id="srch-term" autofocus placeholder="Search Products"/> 
<span class="md-input-bar"></span> 
</form> 

そしてここでは、PHPの配列から作成されたJSONオブジェクトのJS、です：

<script type = "text/javascript"> 
var orderFormData = <?php Json_encode ($tempdata);?>; 
</script> 

私は最高の機能を使用するかわかりませんまたはJSONオブジェクトでどのように使用するのか、JSオートコンプリートが良い解決策かもしれないと聞いています。

これらを結びつけ、検索で素晴らしいオートコンプリート/フィルタ機能を使用する方法はありますか。

Answer 1

これは単に概念実証として与えられる：

<form id="searchProducts"> 
<input type="text" class="md-input label-fixed" name="srch-term" id="srch-term" autofocus placeholder="Search Products"/> 
<span class="md-input-bar"></span> 
</form> 
<script> 
    var orderFormData = <?php Json_encode ($tempdata);?>; 
</script> 
<script> 
    var orderData = orderFormData // default value 
    var search = function (e) { 
    var term = e.currentTarget.value  
    orderData = Object.entries(orderFormData).reduce(function (data, entry) { 
     if (entry[0].match(term) || entry[1].match(term)) { 
     data[entry[0]] = entry[1] 
     } 

     return data 
    }, {}) 

    console.log(orderData) 
    } 

    document.querySelector('#srch-term').addEventListener('keyup', search)  
</script> 

これは、入力で与えられた用語のキー/値の一致に基づいて、フィルタ部を、ハンドル。

あなたはオートコンプリートをしたい場合は、より多くをコーディングする必要があります:)

Answer 2

あなたはechoを追加するのを忘れ：

<?php echo json_encode($tempdata);?>; 

あなたがjson_encodeを使用している場合は、あなたがechoまたはprint()する必要があります。また、必ず正しいケース（オプション）を使用してください。