jQuery Live Search 在一个网站上两次答案

【问题标题】：jQuery Live Search twice on one web sitejQuery Live Search 在一个网站上两次
【发布时间】：2018-07-22 19:51:02
【问题描述】：

我有以下 JQuery Live Search，效果很好。这是 JQuery 部分：

<script type="text/javascript">
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){

                $.get("livesearch/searchschule.php", {term: inputVal}).done(function(data){
                    // Display the returned data in browser
                    resultDropdown.html(data);
                });
        } else{
            resultDropdown.empty();
        }
    });

    // Set search input value on click of result item
    $(document).on("click", ".result option", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script>

这是html部分：

<div class='search-box' style='width: 95%;'>
    <input type='text' name='Schule' autocomplete='off' placeholder='Schule suchen'>
    <div class='result'></div>
</div>

因此，此实时搜索有效并将结果设置在下拉列表中。

现在我想要两个实时搜索输入字段。第二个，列出另一个查询的结果。

我尝试为 <div> 指定一个 id 或名称并设置以下 if-else-statement：

if ($('.search-box').attr('id') == '0'){ ... }

但这不起作用，因为我添加了第二个输入字段。第二个 sql-query 存储在它自己的 php 文件中。

第二个也应该称为“搜索框”，并且“结果”也应该没有其他名称，因为样式原因。

那么有办法吗？提前致谢。

【问题讨论】：

标签： javascript jquery livesearch

【解决方案1】：

您可以在输入字段中添加一个数据属性，该属性将存储查询文件的名称。

现在在您的获取搜索结果功能中，您可以像这样构建 url

var searchUrl = 'livesearch/' + $(this).data('filename') + '.php';

这里的文件名是您输入字段中的数据属性。

你可以这样设置 data-filename='searchschule' 在您的输入 html 标记中。

其余的应该都可以正常工作。只需添加另一个 html div。还要确保添加正确的文件名作为其数据属性。

【讨论】：