Ajax

Ajax实现智能搜索提示框

Ajax制作智能提示搜索框

今天闲来无事，想在网站上加点新鲜内容，于是在搜索框上下了点文章。

灵感呢来自百度，来自阿里巴巴，总之有提示框的地方都是我灵感的来源，具体怎么做呢，其实so easy!

一.必备技术：

  1. ajax

  2. 数据库mysql或者mongodb都可以

  3. 后台语言php或者nodejs都行，至于js你可以用原生也可以JQuery

语言什么的其实都不重要，方法思路才是最关键的。

二.整个流程：

  • 用户向搜索框写入要查询的关键字，每次输入完一个字符后，便会出现下拉框提示。
  • 移动到下拉框中的关键字，关键字所在行改变背景颜色，点击后跳转到相应页面。
  • 当输入为空时，下拉框消失。

三.实现：

下面就具体分析下实现思路：

1）每次输入一个字符便触发相应的事件,这里可以使用js中键盘抬起事件onkeyup(),每当键盘抬起便触发相应的函数

2）触发什么函数呢？当然是ajax异步交互啦！用户每输入一个关键字，都会讲这个值用ajax向后台发送get请求，并接受响应。

3）后台需要完成什么过程呢？需要将传过来的get值，作为查询的值在数据库中进行模糊查询，并将结果集返回给前台页面。

4）前台接受响应数据后，在页面中渲染即可。

逻辑图如下：

下面贴相关主要代码，我采用的是thinkphp框架写的

  • onkeyup()的函数search_more()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function search_more(){
if(h_search.value==""){$(".mallSearch .search-list").css("display","none");}
else{
$(".mallSearch .search-list").css("display","block");
$.ajax({
type:"get",
url:"{:url('index/index/ksearch')}",
data:{keyword:h_search.value},
success:(data)=>{
var htmlcode=" ";
var $id;
for(var i=0;i<data.data.length;i++){
$id=data.data[i]['product_name'];
htmlcode+="<a href='{:url('index/index/details')}'>"+(data.data[i]['product_name'])+"</a>";//向下拉框页面循环插入a标签
}
$(".mallSearch .search-list").html(htmlcode);
}
});
}
}
  • 后台代码（不同后台处理不一样）
1
2
3
4
public function ksearch(){
$result=Product::where("product_name",'like',"%{$_GET['keyword']}%")->select();
return array('data'=>$result);
}

四.遇到的问题：

1.这里今天处理后台的时候遇到一个小坑，就是tp5对于多条数据查询返回的是一个数据集对象。如果是find()返回的是一个一维数组直接打印就好了，但是select()就很头疼了，直接打印打印不了，dump的话是一堆乱七八糟无用的东西，后来在百度查了好久发现只要将其数据对象转化为数组即可。

一开始我试着用了toArray()这个方法发现不好使.因为它只对非模型操作数据库好使
后来又试了一下
array('data'=>$result);game over!

2.$result=Product::where("product_name",'like',"%{$_GET['keyword']}%")
sql语句容易写错{$_GET['keyword']},两边大括号别忘了，大括号相当于echo

下面是最终效果: