Question

所以我在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!';
}   
}

Answer 1

填充功能有几处错误，请尝试：

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

您正在寻找一个不存在“inputString”类的文本字段。同样，您正在寻找“建议”类，而“建议”实际上是div的ID。您可能希望将建议div更改为＆lt; ul＆gt;因为你正在加载＆lt; li＆gt;进入它。

这是一个JSFiddle - http://jsfiddle.net/DjuJ4/1/ （注意：我已经用静态数据变量替换了你的ajax调用以进行测试）

自动完成功能无效

1 个答案: