使用虚拟键盘进行Jquery自动完成

时间:2011-01-26 16:50:10

标签: php jquery

我正在尝试使用虚拟键盘自动完成功能(来自http://keith-wood.name/keypad.html

如果我使用实际键盘,自动完成功能正常但如果我使用鼠标自动完成功能按下虚拟键盘则不起作用。 (在这两种情况下,虚拟键盘都显示得很完美。)

我该如何解决这个问题?

<style type="text/css">
@import "keyboard/jquery.keypad.css";
</style>
<script type="text/javascript" src="keyboard/jquery-1.4.2.js"></script>


<script type="text/javascript">
    function lookup(inputString) {
        if(inputString.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup

    function fill(thisValue) {
        $('#inputString').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }
</script>

<script type="text/javascript" src="keyboard/jquery.keypad.js"></script>
<script type="text/javascript">
$(function () {

$('#inputString').keypad();

});
</script>
</head>

<body>


    <div>
        <form>
            <div>
                Type your search:
                <br />
                <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
            </div>

            <div class="suggestionsBox" id="suggestions" style="display: none;">
                <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                <div class="suggestionList" id="autoSuggestionsList">
                    &nbsp;
                </div>
            </div>
        </form>
    </div>

1 个答案:

答案 0 :(得分:1)

您可以使用onKeypress回调函数在键盘上的每次按键后运行查找功能。

$('#inputString').keypad({
    onKeypress: function(key, value, inst) { 
         lookup(value);
    } 
});