php - 在清除文本框字段时再次加载选择框

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>

score 0 · Accepted Answer

我在这里要做的是使用同一个 PHP 文件中的 AJAX 填充列表，但让它输出 JSON。在加载页面时，AJAX 请求将加载 php 文件、获取 JSON 并在列表中添加项目。

当文本字段为空时刷新，您可以使用 onChange 或 onKeyUp 并检查length值的。

我认为这一切在 jQuery 或任何 JS 框架中都会比纯 JS 简单得多:)

这些将有助于：

score 0 · Accepted Answer

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

score 0 · Accepted Answer

把这段代码：

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>页面中的标记之前，当您清除文本框值时，它将显示所有选项。

php - 在清除文本框字段时再次加载选择框

3 回答 3

Related

Reference