自动完成功能不工作

所以我在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

自动完成功能不工作

回答

相关问题