JavaScript实现类似百度的智能搜索框

很多网站都提供智能搜索框这一功能，它能根据用户的输入自动提示出需要补全的数据项，方便了用户的查询操作。下面用JavaScript+jquery在前端层面实现了智能搜索框功能，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><title>智能搜索框</title><meta charset="UTF-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><style>.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>
</head>
<body><div class="search"><input type="text" id="search_text" /><div id="auto_div"></div></div>
<script type="text/javascript">//测试用的数据，这里可以用AJAX获取服务器数据var test_list = ["前方高能", "前戏", "前端学什么", "前端周末班", "前端和后端的区别", "前端开发", "java是什么", "javascript", "java面试题及答案2020", "java语言", "jsk是什么意思", "js是什么意思", "javascript和java的区别", "java吧", "css"];//智能补全function AutoComplete(auto, search, mylist) {var autoNode = $("#" + auto);   //缓存对象（弹出框）var completeList = new Array();var n = 0;var old_value = $("#" + search).val();for (var i in mylist) {if (mylist[i].indexOf(old_value) == 0) {  // 若匹配项需要以输入的内容开头，用==;否则用>=completeList[n++] = mylist[i];}}if (completeList.length == 0) {autoNode.hide();return;}autoNode.empty();  //清空上次的记录for (var i in completeList) {var wordNode = completeList[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 () {$(this).css("background-color", "#ebebeb");});newDivNode.mouseout(function () {$(this).css("background-color", "white");});//鼠标点击文字上屏newDivNode.click(function () {autoNode.hide();//取出高亮节点的文本内容var comText = $(this).text();//文本框中的内容变成高亮节点的内容$("#" + search).val(comText);});//如果返回值有内容就显示出来autoNode.show();}//点击页面隐藏自动补全提示框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 () {$("#search_text").focus(function () {AutoComplete("auto_div", "search_text", test_list);});$("#search_text").keyup(function () {AutoComplete("auto_div", "search_text", test_list);});});</script>
</body>
</html>

实现思路是：

利用“父相子绝”的定位方式实现一个小的布局
监听输入框的focus()和keyup()事件。在响应方法中，获取用户输入的值，与数据库中已有的数据项匹配，动态创建包含匹配数据项的div并追加到文本框下面的div中去；同时设置高亮细节以及点击上屏的功能。

效果图：

To do

在待匹配项中高亮用户已输入/待输入的部分。

JavaScript实现类似百度的智能搜索框相关推荐

JAVA ajax搜索框_JS+Ajax实现百度智能搜索框
首先浏览实现后的结果,输入一个a之后会出现包含a的下拉列表,当我们点击某一个的时候,搜索框中就会出现点击的值.实现所需要的主要是ajax+js. 前端search.jsp pageEncoding=& ...
淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
百度站内搜索框自己定义样式、显示方式...（瓜头酱油的发现）供站内搜索入门者围观
这次需要做一个百度的站内搜索, 刚开始做这个东西什么都不知道,心里急了, 公司的人看我比较急也给我指定了一下,但是全公司就我一个PHP程序员, 还是我自己摸索吧, 哈哈哈哈刚好现在找到了资料... ...
html切换搜索引擎,JavaScript切换搜索引擎的导航网页搜索框实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所述: #search ul { list-style-type: none; display: block; width: 100px; height: ...
用HTML+CSS实现一下百度顶部的搜索框
用HTML+CSS实现一下百度顶部的搜索框原页面是这样的我在这里采取的是原页面的写法,用的精灵图实现,后面用的两个input框,在加一个iconfont图标加定位简单实现了一下. 这个是做出来的样 ...
使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择. 使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScrip ...
JavaScript实现智能搜索框
应用场景: 1. 搜索框在页面中占据的空间过小,希望无论浏览到什么位置,可以轻易地回到并聚焦搜索框. 2. 搜索框里面的文字大小过小,希望能够在上方开辟一块空间放大内容解决思路: 1. 对整个页面添 ...
智能搜索框html代码,js实现搜索框关键字智能匹配代码
只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在 ...
Android开源实战：简单好用、含历史搜索记录的智能搜索框
前言 Android开发中,类似下图的搜索功能非常常见今天,我将带来一款封装了历史搜索记录功能 & 样式的Android 自定义搜索框开源库,希望你们会喜欢. 已在Github开源: ...
海量图片曝光百度新家“搜索框”大厦
今天陪朋友到百度办事,有幸参观了百度的新办公大楼--搜索框大厦.大厦特别漂亮,内部设计特别炫,功能更是酷啊!海量图片第一时间与大家分享一下~~ 刚到上地环岛,远远就看到气势宏伟的大厦,非常醒目.波浪形 ...

JavaScript实现类似百度的智能搜索框

To do

JavaScript实现类似百度的智能搜索框相关推荐

最新文章

热门文章