자동 완성 기능이 작동하지 않습니다.

Question

그래서이 자동 완성 기능은 자바 스크립트로 제공되지만 완전히 작동하지는 않습니다. 자동 완성 목록을 클릭 할 수 없으므로 목록에서 항목을 클릭해도 텍스트 상자에 아무 것도 채워지지 않습니다.

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> 

자바 스크립트 :

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!'; 
} 
} 

Answer 1

실수의 몇 가지가 있습니다 채우기 기능에서 다음을 시도하십시오.

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

존재하지 않는 "inputString"클래스의 텍스트 필드를 찾고있었습니다. 마찬가지로 "제안"이 실제로는 div의 ID 인 반면 "제안"클래스를 찾고있었습니다. 제안서 div를 <ul>으로 변경하려면 <li>을로드해야합니다.

는 여기 JSFiddle있어 - http://jsfiddle.net/DjuJ4/1/ (참고 : 제가 테스트의 목적을위한 정적 데이터 변수와 아약스 전화를 교체 한)