无法让自动完成弹出框在onblur上消失

时间:2014-02-24 06:43:40

标签: javascript php jquery html autocomplete

我正在尝试实现自动填充表单,如下所示: http://res.nodstrum.com/autoComplete/

我无法继续工作并使建议框消失。

我在下面列出了很多完整性代码,但重要的部分是HTML,可能是fill()。

我试过

onblur="document.getElementById('suggestions').style.display='none';"

并尝试了

$('#suggestions').hide();
fill()

中的

除其他外,但却无法让它发挥作用。

HTML

<form>
        <div>
            Type your country:
            <br />
            <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" onFocus="this.value=''; this.onfocus='';" value="France"/>
        </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>

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);
}

这是rpc.php的关键

if(strlen($queryString) >0) {
            // Run the query: We use LIKE '$queryString%'
            // The percentage sign is a wild-card, in my example of countries it works like this...
            // $queryString = 'Uni';
            // Returned data = 'United States, United Kindom';

            // YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.
            // eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE '$queryString%' LIMIT 10

            $query = $db->query("SELECT your_column FROM your_db_table WHERE your_column LIKE '$queryString%' LIMIT 10");
            if($query) {
                // While there are results loop through them - fetching an Object (i like PHP5 btw!).
                while ($result = $query ->fetch_object()) {
                    // Format the results, im using <li> for the list, you can change it.
                    // The onClick function fills the textbox with the result.

                    // YOU MUST CHANGE: $result->value to $result->your_colum
                    echo '<li onClick="fill(\''.$result->value.'\');">'.$result->value.'</li>';
                }
            } else {
                echo 'ERROR: There was a problem with the query.';
            }
        } 

0 个答案:

没有答案