无法在 2 个文本框中分隔 jquery 结果

Question

我有 2 个文本框，它们从 2 个不同的表中填充来自 mysql 的数据。

代码确实可以从两个表中获取数据，但它在两个 texboxes 中显示相同的表结果，现在我希望每个表结果在每个文本框中的每个 1 中分开。

我正在使用自动完成功能，因此当您开始在文本框中输入时，它会显示表格的结果。

我尝试复制该函数并使用不同的 id 制作其中的 2 个，但它只在 1 个文本框中显示结果，只有 1 个函数在两个文本框中显示结果但来自同一个表。

HTML：

<table style="float:left; clear:both;">
    <tr>
        <td class="tdfilter">
            <label>Boekingsnummer</label>
            <input type="text" name="boekingsnummer" size="20" id="boekingsnummer" onkeyup="lookup(this.value);" onblur="fill();" >    
            <div class="suggestionsBox" id="suggestions" style="display: none;">
            <div class="suggestionList" id="autoSuggestionsList">
            </div>
            </div>
        </td>
        <td class="tdfilter">
            <label>Naam klant</label> 
            <input type="text" name="naam_klant" size="20" id="naam_klant" onkeyup="lookup(this.value);" onblur="fill();" >    
            <div class="suggestionsBox" id="suggestions2" style="display: none;">
            <div class="suggestionList" id="autoSuggestionsList2">
            </div>
            </div>
        </td>
</table>

脚本：

<script type="text/javascript">            
function lookup(inputString)
{
    if(inputString.length == 0)
    {
        $('#suggestions').hide();
    }    
    else     
    {    
        $.post("rpc.php", {queryString: ""+inputString+""}, function(data)    
        {   
    if(data.length >0)    
    {    
        $('#suggestions').show();    
        $('#autoSuggestionsList').html(data);
    }
        });
    }
}

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

PHP：

<?php
$db = new mysqli('localhost', 'root' ,'*', 'records');
if(!$db) 
{
// Show error if we cannot connect.        
echo 'ERROR: Could not connect to the database.';
} 

else 
{
// Is there a posted query string?
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");     
$query2 = $db->query("SELECT boekingsnummer FROM overboekingen WHERE boekingsnummer LIKE '$queryString%' LIMIT 10");

if($query) 
{
while ($result = $query ->fetch_object()) 
{
echo '<li onClick="fill(\''.$result->naam_klant.'\');">'.$result->naam_klant.'</li>';
}
}   

if($query2) 
{
while ($result2 = $query2 ->fetch_object()) 
{
echo '<li onClick="fill(\''.$result2->boekingsnummer.'\');">'.$result2->boekingsnummer.'</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 script!';
}   
}
?>

Answer 1

代码：

setTimeout("$('.suggestions').hide();", 200);

应该是：

setTimeout("$('#suggestions').hide();", 200);

Answer 2

这应该可以解决

function lookup(inputObject, ) {
    var $td = $(inputObject).parent();
    if(inputObject.value.length == 0) {
        $td.find('.suggestionsBox').hide();

    } else {    
        $.post("rpc.php", {queryString: ""+inputObject.value+""}, function(data){   
            if(data.length >0) {    
               $td.find('.suggestionsBox').show();    
               $td.find('.suggestionList').html(data);
            }
        });
    }
}

在 html 中：

<input type="text" name="boekingsnummer" size="20" id="boekingsnummer" onkeyup="lookup(this);" onblur="fill();" >
[...]
<input type="text" name="naam_klant" size="20" id="naam_klant" onkeyup="lookup(this);" onblur="fill();" >  

Answer 3

您需要传递一个参数以从 ajax 调用中识别表。

更改您的 html：

onkeyup="lookup(this.value);"

到：

onkeyup="lookup(this.id);"

在你的 jquery 中：

function lookup(id)
{
     inputString =  $('#'+id).val();
     tableName = id=='boekingsnummer' ? 'first' : 'second';

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

在你的 php 中你可以检查检查表名：

if(strlen($queryString) >0) 
{
  if($_POST['tableName'] == 'first'){
    //get result from first table
}   
else if($_POST['tableName'] == 'second') {
  //get result from another table
}