智能搜索框实现思路--源码和流程图详解
我们在浏览各大网站的时候，包括百度、淘宝、京东、雅虎等等网站，当我们输入一个单词或者文字的时候，下面会有一行行待选项供我们选择，很多的公司在做网站的时候也会考虑到这块，那么我们今天就简单的说一下实现的思路，简单的把代码写一下！
首先我们看一下做好的例子和我画的流程图以便于大家理解这块！
首先是完成的例子：
例子
流程图：
PS：源码不是我写的，我只是有这个需求，就找了一下源码根据自己的需求改了一下，源码出自一个博友的博客，他的源码写的也很详细，大家感兴趣可以去搜一下！
下面我们简单的看一下代码：
H5源码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.search
{
left: 0;
position: relative;
}
#auto_div
{
display: none;
width: 300px;
border: 1px #74c0f9 solid;
background: #FFF;
position: absolute;
top: 24px;
left: 0;
color: #323232;
}
</style>
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js/testcode.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//(这里是可以直接请求接口取到数据，就和直接调用一个testcode.js是一样的)
var test_list = test_list;
var old_value = "";
var highlightindex = -1; //高亮
//自动完成
function AutoComplete(auto, search, mylist) {
if ($("#" + search).val() != old_value || old_value == "") {
var autoNode = $("#" + auto); //缓存对象（弹出框）
var carlist = new Array();
var n = 0;
old_value = $("#" + search).val();
for (i in mylist) {
if (mylist[i].indexOf(old_value) >= 0) {
carlist[n++] = mylist[i];
}
}
if (carlist.length == 0) {
autoNode.hide();
return;
}
autoNode.empty(); //清空上次的记录
for (i in carlist) {
/* 控制一下显示的个数 */
if(i>5){
return;
}
var wordNode = carlist[i]; //弹出框里的每一条内容
var newDivNode = $("<div>").attr("id", i); //设置每个节点的id值
newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");
newDivNode.html(wordNode).appendTo(autoNode); //追加到弹出框
//鼠标移入高亮，移开不高亮
newDivNode.mouseover(function () {
if (highlightindex != -1) { //原来高亮的节点要取消高亮（是-1就不需要了）
autoNode.children("div").eq(highlightindex).css("background-color", "white");
}
//记录新的高亮节点索引
highlightindex = $(this).attr("id");
$(this).css("background-color", "#ebebeb");
});
newDivNode.mouseout(function () {
$(this).css("background-color", "white");
});
//鼠标点击文字上屏
newDivNode.click(function () {
//取出高亮节点的文本内容
var comText = autoNode.hide().children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#" + search).val(comText);
})
if (carlist.length > 0) { //如果返回值有内容就显示出来
autoNode.show();
} else { //服务器端无内容返回 那么隐藏弹出框
autoNode.hide();
//弹出框隐藏的同时，高亮节点索引值也变成-1
highlightindex = -1;
}
}
}
//点击页面隐藏自动补全提示框
document.onclick = function (e) {
var e = e ? e : window.event;
var tar = e.srcElement || e.target;
if (tar.id != search) {
if ($("#" + auto).is(":visible")) {
$("#" + auto).css("display", "none")
}
}
}
}
$(function () {
old_value = $("#search_text").val();
$("#search_text").focus(function () {
if ($("#search_text").val() == "") {
AutoComplete("auto_div", "search_text", test_list);
}
});
$("#search_text").keyup(function () {
AutoComplete("auto_div", "search_text", test_list);
});
});
/* 搜索的函数 */
function _serchfun(){
var search_text = $("#search_text").val();
/* 执行ajax调用接口，接口实现的功能是完成搜索和将数据存储到备选的数据库里面 */
}
</script>
</head>
<body>
<div class="search">
<input type="text" id="search_text" />
<div id="auto_div">
</div>
<input type="button" value="搜索" οnclick="_serchfun"/>
</div>
</body>
</html>js源码：
/*
aim：数据预备
author：clearlove
date：2018-7-19
declare：这里是一个预备的数据，可以根据用户输入的习惯和记录将改js更新，然后将数据倒序排列，这样每一次显示的就是用户之前最后输入的数据可以实现一个比较智能的效果，
每一次用户点击输入框的时候触发的是ajax调用的接口，然后每一次用户输入结束以后确认搜索的东西才触发存储的函数
*/
var test_list = ["手机", "智能手机", "诺基亚", "天宇", "金立", "小米", "小辣椒", "美图", "威图", "三星", "洗衣机", "榨汁机", "智能设备", "小爱音响"];解释一下里面几个需要注意的地方
第一：一般的话我们是需要搜索数据库里面所有关于用户输入的字段的信息的，但是用户没有输入的时候我们是默认显示5条或者更多的。
第二：有很多的网站做法是相关推荐，举个例子，用户输入手机的时候，里面会出现很多关于手机的信息和品牌，这种做法的话我这个流程图就已经满足不了了，等到有需求的时候我会写一个解决方案的！
第三：其实所谓的智能也不过是拿到数据数据根据用户输入的信息来分析可能出现的文字，这个呢有几个问题，第一就是用户多的时候是不是需要每一个用户一个类似的数据库出来，第二就是当用户输入的数据过少的时候我们根据什么推送可能出现的信息？
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-07-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读