按照列名显示搜索结果

16 浏览
0 Comments

按照列名显示搜索结果

我有一个搜索输入框，当你输入时，它会从我的数据库中提取前10个结果，并即时剔除那些不匹配的结果。我从https://codeforgeek.com/2014/09/ajax-search-box-php-mysql/中获得了这个例子，该例子使用了Twitter的typeahead JavaScript库。

我的问题是，我必须在process-search.php中定义要搜索的列，而不是在选择过程中选择它。我需要从选择字段中选择一个表列，然后使用所选列填充搜索。我觉得我离成功很近，但迄今为止还没有成功。

我已经将我尝试过的查询和代码注释掉，这些是有效的。另外，我在HTML中保留了选择框。

非常感谢任何帮助。

Index.php

search-script.js

// JavaScript Document
var col = 'country'
$(document).ready(function(){
    "use strict";
     //搜索的自动补全功能
 $('select[name="term"]').change(function(){
     col = $('select[name="term"]').val();
});
$('input.typeahead').typeahead({
    name: 'keyword',
    remote:'process-search.php?key=%QUERY&col=' + col,
    limit : 10
  });
});

process-search.php

,,,);
    if($db->connect_errno > 0){
        die('Unable to connect to database [' . $db->connect_error . ']');
    }
    $sql = "select * from table_name where ".$col." LIKE '%{$key}%'";
    if(!$result = $db->query($sql)){
        die('There was an error running the query [' . $db->error . ']');
    }
    while($row = $result->fetch_assoc()){
        $array[] = $row[$col];
    }
    echo json_encode($array);
?>

0

1 答案

0 Comments

问题的原因是在搜索结果显示时，无论选择哪一列，始终只返回默认列的结果。解决方法是监听选择列的变化事件，重新运行typeahead函数，以更新查询。

具体的解决方案如下：

1. 在Jquery代码中，定义一个变量col，并设置默认值为"default"。

2. 在页面加载完毕后，使用typeahead函数为输入框添加自动完成功能。并将远程搜索的URL设置为"process-search.php?key=%QUERY&col='+col"。

3. 监听选择列的变化事件，当选择发生变化时，将选择的列赋值给col变量。

4. 在process-search.php文件中，获取传递的关键字key和选择的列col。

5. 根据传递的关键字和选择的列，在数据库中进行查询，并将查询结果存入数组array。

6. 将数组array转换为JSON格式，并输出到页面。

但是，在实际使用过程中，出现了一些问题。当设置默认列为'country'时，无论选择哪一列，始终只返回country列的结果。尝试将typeahead函数放入change函数中，但只有在第一次选择列时有效，之后不会再改变。尝试使用$('select[name="term"]').val()替换typeahead函数中的col参数，但仍然只使用第一个选项值。

在尝试了多种方法后，仍无法解决问题。猜测可能与typeahead插件的实现方式有关，但对该插件不太熟悉。

最后的建议是，在重新运行typeahead函数之前，先使用.off()方法清除输入框上的所有监听器。使用$('input.typeahead').off()，然后再重新调用$('input.typeahead').typeahead()。这样可以避免多个冲突的事件处理程序。

文章到此结束，希望对你有帮助。

0