Question

我有一个实时的php实时搜索，当文本输入中写入文本时，它会填充下拉列表等结果。我需要的是添加另一个元素到dropdwon来搜索活动/非活动，这里我的代码是当前的：

修改

我能够使用以下代码在php中收到下拉值：

HTML：

<input type="text" id="search" autocomplete="off">
<select id="status" name="status">
    <option value="1" selected="selected">ACTIVE</option>
    <option value="0">INACTIVE</option>
</select>
<!-- Show Results -->
<h4 id="results-text"></h4>
<ul id="results"></ul>

JavaScript的：

$(document).ready(function() {  

    function search() {
        var query_value = $('input#search').val();
        var status_value = $('input#status').val();
        $('b#search-string').html(query_value);
        if(query_value !== ''){
            $.ajax({
                type: "POST",
                url: "searchtop.php",
                data: { query: query_value, status: status_value },
                cache: false,
                success: function(html){
                    $("ul#results").html(html);
                }
            });
        }return false;    
    }

    $("input#search").live("keyup", function(e) {
        clearTimeout($.data(this, 'timer'));

        var search_string = $(this).val();

        if (search_string == '') {
            $("ul#results").fadeOut();
            $('h4#results-text').fadeOut();
        }else{
            $("ul#results").fadeIn();
            $('h4#results-text').fadeIn();
            $(this).data('timer', setTimeout(search, 100));
        };
    });

});

现在唯一的问题是，在选择状态后，我必须点击输入并按任意箭头键以获取所选状态的记录。

Answer 1

您只是在听取输入字段。您还应检查select元素是否已更改。

function doStuff(){
    clearTimeout($.data(this, 'timer'));
    var search_string = $("#search").val();
    if (search_string == '') {
        $("#results").fadeOut();
        $('#results-text').fadeOut();
    }else{
        $("#results").fadeIn();
        $('#results-text').fadeIn();
        $(this).data('timer', setTimeout(search, 100));
    };
}

// please read my note at the bottom
$("#search").on("keyup", function(e) {
    doStuff();
});
$("#status").on("change", function(e) {
    doStuff();
});

将$('input#status').val();更改为$('#status').val();，因为它是选择元素，而不是输入。

顺便说一句。您不必使用'tag#id'。在引用具有相同类名的不同元素（例如'div.class'和'span.class'时，这可能很有用。一旦每个元素具有唯一标识符（必要时），使用'tag#id'是没有意义的。

注意：

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。旧版jQuery的用户应该使用.delegate（）而不是.live（）。

jQuery .live()

jQuery .on()

具有多个值的PHP Ajax Live Search

1 个答案: