テキストボックスフィールドのクリア時にセレクトボックスを再度読み込む

Question

私は選択ボックスと選択ボックスのリストを検索するテキストボックスを持っています。選択ボックスは、PHPを使用してデータベースから取り込まれています。私がここで達成しようとしているのは、テキストフィールドをすぐにクリアすることです。選択ボックスが更新されます。私はそれを行うためにページ全体をリロードする必要があります。ここでは、私が選択ボックスを通して検索するために使用する小さなスクリプトです。

function filterSelectBox(filterButton) { 
    var searchValue = document.getElementById('selectFilter').value.toLowerCase(); 
    var selectField = document.getElementById("domainID"); 
    var optionsLength = selectField.options.length; 

    for(var i = 0; i < optionsLength; i++) { 
     if(selectField.options[i].innerHTML.toLowerCase().indexOf(searchValue) >= 0) { 
      selectField.options[i].style.display = 'block'; 
     } else { 
      selectField.options[i].style.display = 'none'; 
     } 
    } 
} 

ここにコードに関連付けられているHTML要素があります。私はここで行うだろうと何

<div class="search_domains" id="search_domains"> 
    <input type="text" id="selectFilter" name="selectFilter" /> 
    <input type="button" id="filterButton" value="Filter" onClick="filterSelectBox(this)"/> 
</div> 

、これは私が選択ボックスを移入していますどのように、

<select name="domainID" id="domainID" size="15" style="width:175"> 
     <option>Select a Domain</option> 
     <? foreach ($domains as $row) { 
     ?> 
     <option value="<?=$row -> id ?>"><?=$row -> domain ?></option> 
     <? } ?> 
    </select> 

Answer 1

このコード置く：ちょうどあなたのページで</body>タグの前に

document.getElementById('selectFilter').onkeyup = function() { 
    if(this.value.length == 0) { 
     var selectField = document.getElementById("domainID"); 
     var optionsLength = selectField.options.length; 

     for(var i = 0; i < optionsLength; i++) { 
      selectField.options[i].style.display = 'block'; 
     } 
    } 
}; 

を、そしてあなたがクリアしたときに、それはすべてのオプションが表示されますテキストボックス値。

Answer 2

は、同じPHPファイルからのAJAXでリストを作成するが、それ出力JSONを持っています。ページをロードすると、AJAXリクエストはPHPファイルを読み込み、JSONを取得してリストに項目を追加します。

テキストフィールドが空白のときにリフレッシュするには、onChangeまたはonKeyUpを使用して、値のlengthをチェックします。

私はこのすべては、純粋なJSよりもはるかにjQueryのが簡単または任意のJSのフレームワークになると思います:)

これらのに役立ちます。

• http://css-tricks.com/dynamic-dropdowns/
• Using jQuery, JSON and AJAX to populate a drop down
• Populate dropdown using json
• Populate Dropdown Menu in PHP from JSONを

Answer 3

AJAXは間違いなく使用できますが、この例では必要ない場合があります。元のコンテンツをJavascript配列に格納し、必要に応じてリセットするほうが効率的かもしれません。私は実際にオプションを削除する代わりに、それらを隠してしまう：

<script type="text/Javascript"> 
    var originalOptions = {<?php $echo = array(); foreach ($domains as $row) $echo[] = "\"{$row->id}\":\"{$row->domain}\""; echo implode(", ", $echo); ?>}; 

    function filterSelectBox(text) 
    { 
     var selectField = document.getElementById('domainID'); 
     selectField.options.length = 0; 

     for (var key in originalOptions) 
     { 
      if (originalOptions[key].substr(0, text.length) == text) 
      { 
       var option = document.createElement("option"); 
       option.value = key; 
       option.text = originalOptions[key]; 
       selectField.add(option, null); 
      } 
     } 
    } 
</script> 
<select name="domainID" id="domainID" size="15" style="width:175"> 
    <?php foreach ($domains as $row) { 
     echo "\t<option value=\"{$row->id}\">{$row->domain}</option>\n"; 
    } ?> 
</select> 

<input type="text" onkeyup="filterSelectBox(this.value)" />