在清除文本框字段時再次加載選擇框

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

我在這里要做的是用相同的PHP文件中的AJAX填充列表，但輸出JSON。 在加載頁面時，AJAX請求將加載php文件，獲取JSON並將項目添加到列表中。

要在文本字段為空白時刷新，可以使用onChange或onKeyUp並檢查值的length 。

我認為所有這些在jQuery或任何JS框架中都比純JS更簡單:)

這些將有助於：

• http://css-tricks.com/dynamic-dropdowns/
• 使用jQuery，JSON和AJAX填充下拉列表
• 使用JSON填充下拉列表
• 從JSON在PHP中填充下拉菜單

Answer 2

您絕對可以使用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)" />

Answer 3

輸入以下代碼：

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

恰好在頁面中</body>標記之前，當您清除文本框值時，它將顯示所有選項。