Question

我有一个位置/区域的下拉列表，里面有一个搜索框。

如图所示，有一个地方列表，然后有区域。区域的部分是静态的，其余的部分是从数据库中提取的。在搜索框内，我可以搜索区域，但不能搜索动态数据。一个选项可以是使用数据库查询，但有一种方法可以在没有数据库查询的情况下执行此功能。

对于搜索，我希望每个字符串都匹配。如果用户在搜索框中的第一个字母是“w”，则应显示从w开始的单词，而不是那些带有字母“w”的单词

<select class="selectpicker select-custom-field location" data-live-search="true" data-live-search-style="begins" title="Location/Region">
    <?php foreach($city as $per_city): ?>
        <option value="<?php echo $per_city->city.','.$per_city->state; ?>">
            <?php echo $per_city->city.', '.$per_city->state; ?>
        </option>
    <?php endforeach; ?>
        <option value="Regions">Regions</option>
        <option value="WEST">WEST</option>
        <option value="SOUTHWEST">SOUTHWEST</option>
        <option value="MIDWEST">MIDWEST</option>
        <option value="SOUTHEAST">SOUTHEAST</option>
        <option value="NORTHEAST">NORTHEAST</option>
</select>

我从$ city获得的示例数组是

Array
(
    [0] => stdClass Object
        (
            [id] => 1
            [city] => Rochester
            [state] => New York
            [country] => 
        )

    [1] => stdClass Object
        (
            [id] => 2
            [city] => Richmond
            [state] => Virginia
            [country] => 
        )

    [2] => stdClass Object
        (
            [id] => 3
            [city] => Spokane
            [state] => Washington
            [country] => 
        )

    [3] => stdClass Object
        (
            [id] => 4
            [city] => Des Moines
            [state] => Iowa
            [country] => 
        )

)

任何人都可以告诉我们如何做到这一点

注意：如果我从select标签中删除data-live-search-style =“begin”，那么如果是用户的第一个字母，则搜索正在进行，但在搜索中是“w”然后显示包含“w”的所有单词。

Answer 1

有很多选择，我认为最好的两个选择是：

将$ cities作为json，然后使用filter（）和javascript
通过ajax将过滤器传递给后端（当你有大量数据要过滤时很好）

两者都有缺点和优点：

如果你通过ajax传递的过滤器得到它，那么请注意数据库将遭受多个请求，当用户键入新的过滤器和/或在后端使用缓存而不是查询db多数时，可以通过给出一些延迟来避免它次

如果您有大量数据，那么仅使用javascript进行过滤会占用一些浏览器内存。

在这两个解决方案中，我建议从后端返回JSON并使用JavaScript动态创建选项，应在onKeyUp上触发函数过滤。

希望它有所帮助。

Answer 2

你可以这样写

<select class="selectpicker select-custom-field location" data-live-search="true" show-subtext="true" data-live-search-style="begins" title="Location/Region">
    <?php foreach($city as $per_city): ?>
        <option data-subtext="<?php echo $per_city->city.','.$per_city->state; ?>">
            <?php echo $per_city->city.','.$per_city->state; ?>
        </option>
    <?php endforeach; ?>
        <option value="Regions">Regions</option>
        <option value="WEST">WEST</option>
        <option value="SOUTHWEST">SOUTHWEST</option>
        <option value="MIDWEST">MIDWEST</option>
        <option value="SOUTHEAST">SOUTHEAST</option>
        <option value="NORTHEAST">NORTHEAST</option>
</select>

无法通过搜索框

2 个答案: