jQuery 在一个网站上进行两次实时搜索

Question

我有以下 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>

所以这个 Live Search 有效并在下拉列表中设置结果。

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

我试图给 <div> 一个 ID 或名称并设置以下 if-else-statement:

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

但这没有用，因为我添加了第二个输入字段。第二个 sql-query 存储在它自己的 php-file.

第二个也应该叫 'search-box' 并且 'result' 应该没有其他名字，因为样式。

那有办法吗？提前致谢。

Answer 1

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

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

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

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

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

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

jQuery 在一个网站上进行两次实时搜索

jQuery Live Search twice on one web site

javascript

jquery

livesearch