javascript - jQuery Live 在一个网站上搜索两次

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>

因此，此实时搜索可以正常工作并将结果设置在下拉列表中。

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

我试图给出 <div> id 或名称并设置以下 if-else 语句:

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

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

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

那有办法吗？提前致谢。

Answer 1

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

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

var searchUrl = 'livesearch/' + $(this).data('文件名') + '.php';

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

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

休息一切应该可以正常工作。只需添加另一个 html div 即可。另请确保添加正确的文件名作为其数据属性。