自動完成功能不工作

所以我在Javascript中有這個自動完成，但它沒有完全工作。自動完成列表不可點擊，因此當您單擊列表中的項目時，沒有任何內容會填充到文本框中。自動完成功能不工作

HTML：

<input type="text" name="naam_klant" size="20" id="naam_klant" onkeyup="lookup(this.value);" onblur="fill();" >  
<div class="suggestionsBox" id="suggestions" style="display: none;"> 
    <div class="suggestionList" id="autoSuggestionsList"> 
    </div> 
</div>

的Javascript：

function lookup(inputString) 
{ 
    if(inputString.length == 0) 
    { 
    $('#suggestions').hide(); 
    }  
    else  
    {  
    $.post("sql_naam_klant.php", {queryString: ""+inputString+""}, function(data)  
    { 
     if(data.length >0)  
     {  
     $('#suggestions').show();  
     $('#autoSuggestionsList').html(data); 
     } 
    }); 
    } 
} 

function fill(thisValue) 
{ 
    $('.inputString').val(thisValue); 
    setTimeout("$('.suggestions').hide();", 200);   
}

查詢：

if(isset($_POST['queryString'])) 
{ 
    $queryString = $db->real_escape_string($_POST['queryString']); 
    // Is the string length greater than 0? 
    if(strlen($queryString) >0) 
    { 
    $query = $db->query("SELECT naam_klant FROM overboekingen WHERE naam_klant LIKE '$queryString%' LIMIT 10");  

    if($query) 
    { 
     while ($result = $query ->fetch_object()) 
     { 
     echo '<li onClick="fill(\''.$result->naam_klant.'\');">'.$result->naam_klant.'</li>'; 
     } 
    } 
    else 
    { 
     echo 'ERROR: There was a problem with the query.'; 
    } 
    } 
    else 
    { 
    } // There is a queryString. 
} 
else 
{ 
    echo 'There should be no direct access to this naam_klant script!'; 
} 
}

來源

2014-04-02 user3455717

最好就是使用jQuery自動完成。這是它http://jqueryui.com/autocomplete/#remote-jsonp –

它必須從MySQL自動完成，除了填入文本框部分之外，這很好。 – user3455717

有幾個錯誤在您的填充功能中，請嘗試：

function fill(thisValue) 
{ 
    $('#naam_klant').val(thisValue); 
    setTimeout("$('#suggestions').hide();", 200);   
}

您正在尋找具有不存在的「inputString」類的文本字段。同樣，你正在尋找「建議」類，而「建議」實際上是div的ID。您可能希望將建議div更改爲<ul>，因爲您正在將<li>加載到其中。

這裏有一個的jsfiddle - http://jsfiddle.net/DjuJ4/1/ （注：我已經取代你的Ajax調用與測試的目的，靜態數據變量）

來源

2014-04-02 10:16:36 ballen

非常感謝您的幫助和解釋，這正是我的代碼再次運行的原因！ – user3455717

自動完成功能不工作

回答

相關問題