Question

我使用.load（）和jquery来调用一个php文件，它会将搜索结果返回到搜索输入栏下面的div中，但在div中，使用TAB或向下箭头不会循环显示结果。

显然，关键控件不知道存在新的结果div。

我正在寻找什么来解决这个问题？

我调用了我的php文件，该文件使用以下代码返回mysql db的结果

$("#searchinput").keydown(function(e) {
if(e.which == 8) {
    SearchText = $("#searchinput").val().substring(0,$("#searchinput").val().length-1);   
 } 

$("#searchresults").load("inc/ajax_search.php", { searchinput:SearchText });
    $("#searchresults").slideDown();

Answer 1

至少表明，有这种插件的插件，但也许你不想使用插件。也许你正试图为自己解决这个问题。

这是一段实现非常简单的自动完成的代码。它不是一个插件，它非常基本，但它具有基本功能。

您的问题表明您可能感兴趣的功能是highlightResult。

脚本下方是所需的标记和样式。

$(function() {

    // OPTIONS
    // length of time, in milliseconds, to wait after a keystroke before the search happens
    // usually 250 ~ 400ms
    var wait     = 250;
    // the minimum number of characters required to search on
    var minChars = 3;
    var queryScript = 'inc/ajax_search.php';

    // cache our two main players for efficiency
    var $input = $('#searchinput');
    var $output = $('#searchresults' );

    // to store the timeout
    var delay = null;

    $input.keypress( function( e ) {
        switch( e.keyCode ) {
            case 13:        // return
                e.preventDefault();
                selectResult();
                return;
            case 38:        // up
                e.preventDefault();
                highlightResult( -1 );
                return;
            case 40:        // down
                e.preventDefault();
                highlightResult( 1 );
                return;
            //case ... there may be keys that you want to ignore like left and right
        }
        clearTimeout( delay );
        delay = setTimeout( search, wait );
    });


    function search() {
        var query = $.trim( $input.val() );
        if( query && query.length >= minChars ) {
            $output.load( queryScript, { searchinput: query } );
        }
    }

    function highlightResult( n ) {

        if( Math.abs(n) != 1 ) return;

        var hilgt = $output.find( '.highlight' );
        var newhilgt;

        // if we don't have a highlighted element...
        if( !hilgt.length ) {
            if( n > 0 ) {
                // highlight the first one
                $output.find('li').eq(0).addClass('highlight');
                // jq 1.4+
                //$output.find('li').first().addClass('highlight');
            } else {
                // highlight the last one
                $output.find('li').slice( -1 ).addClass('highlight');
                // jq 1.4+
                //$output.find('li').last().addClass('highlight');
            }
        }

        if( n > 0 ) {
            var newhilgt = hilgt.next();
        } else {
            var newhilgt = hilgt.prev();
        }

        if( newhilgt.length ) {
            newhilgt.addClass('highlight');
            hilgt.removeClass('highlight');
        }

    }

    function selectResult() {
        var sel = $output.find( '.highlight' );
        if( sel.length ) {
            // do something with the selected element
            console.log( sel[0] );
        }
    }

    // For completeness the functions below handle mouse stuff
    $('#searchresults li').live( 'mouseover', function( e ) {
        $(this).siblings('.highlight').removeClass('highlight');
        $(this).addClass('highlight');
    });

    $('#searchresults li').live( 'click', function( e ) {
        e.preventDefault();
        selectResult();
    })

});

要求

<style type="text/css">
    .highlight {
        background: red;
    }
</style>

<input type="text" id="searchinput"/>
<div id="searchresults"></div>

从你的ajax调用返回假设是

<ul>
    <li>result 1</li>
    <li>result 2</li>
    <li>result 3</li>
    ...
</ul>

Answer 2

听起来您正在编写自己的自动填充功能。您应该只为jQuery使用现有的自动完成插件。

http://docs.jquery.com/Plugins/Autocomplete

无法使用制表符或箭头键在新div中循环显示结果

2 个答案: