jquery实现类似百度的搜索框-js教程-PHP中文网

首页

web前端

js教程

jquery实现类似百度的搜索框

小云云

Dec 04, 2017 am 10:42 AM

jquery 搜索百度

作为一名开发人员，在开发网站的时候搜索框也是必不可少的一项功能，最近工作中需要做一个搜索框，类似百度的搜索框，本文我们就和大家分享关于Jquery实现类似百度的搜索框。

需要达到两个功能：

1.输入关键字,展示匹配的下拉列表

2.选择匹配的项后查出相关内容

一般电商网站中也经常用到该搜索条，首先分析功能实现，输入关键字马上显示匹配项列表，实现该功能输入框需要绑定"input"事件，然后向后台发送异步请求，将数据展示在页面上。使用鼠标或上下键选择匹配项，点击搜索或"Enter"键后搜索具体结果。这里要用到两个异步请求，第一个请求匹配项，第二个请求搜索结果。键盘，鼠标以及输入框的事件都要监听到，还必须考虑到灵活性，也就是适应各种类似需求，想做好还是有一些难度的，下面分布进行实现。

一.html和css

<body>
    <div id="search-form"></div>
</body>
<style type="text/css">
    *{margin: 0;padding: 0;list-style:none;border:none;}
    body {
        font-family: "microsoft yahei" !important;
        background-color: #FDFFE0;
    }
    :focus {
        outline: none;
    }
    #search-form {
        position: relative;
        top: 50px;
        display: inline;
    }
</style>

登录后复制

二.导入css和js文件

由于博客上传不了文件，可以去我的git:http://git.oschina.net/manliu.com/search_frame上有完整的项目文件

三.页面引用js

<script type="text/javascript">
var proposals = [&#39;百度1&#39;, &#39;百度2&#39;, &#39;百度3&#39;, &#39;百度4&#39;, &#39;百度5&#39;, &#39;百度6&#39;, &#39;百度7&#39;,&#39;17素材网&#39;,&#39;百度&#39;,&#39;新浪&#39;];
$(document).ready(function(){
    $(&#39;#search-form&#39;).complete({
        searchIn:function(val){//传入输入值，返回匹配值
            /* var reg = /^[\u4F00-\u9FA5\uF900-\uFA2D]/;
            return reg.test(val); */
            var word = "^"+val+".*";
            var rs = [];
            $.each(proposals,function(i,n){
                if(n.match(word)){
                    rs.push(n);
                }
            });
            return rs;
        },
        width:400,
        height: 30,
        submitIn: function(text){//搜索选定的值
            alert(text);        
        }
    });
});
</script>

登录后复制

这里searchIn方法用于返回匹配项，通常在里面定义一个异步请求，向后台取数据，返回一个数组，对于复杂的还需要修改源码；submitIn用于搜索匹配的结果，一般可异步请求也可同步请求。

以上内容就就是关于query实现类似百度的搜索框的教程，希望能帮助到大家。

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7412

CakePHP 教程

1359

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

2 个月不见，人形机器人 Walker S 会叠衣服了 Apr 03, 2024 am 08:01 AM

机器之能报道编辑：吴昕国内版的人形机器人+大模型组队，首次完成叠衣服这类复杂柔性材料的操作任务。随着融合了OpenAI多模态大模型的Figure01揭开神秘面纱,国内同行的相关进展一直备受关注。就在昨天，国内"人形机器人第一股"优必选发布了人形机器人WalkerS深入融合百度文心大模型后的首个Demo，展示了一些有趣的新功能。现在，得到百度文心大模型能力加持的WalkerS是这个样子的。和Figure01一样，WalkerS没有走动，而是站在桌子后面完成一系列任务。它可以听从人类的命令，折叠衣物

deepseek网页版入口 deepseek官网入口 Feb 19, 2025 pm 04:54 PM

DeepSeek 是一款强大的智能搜索与分析工具，提供网页版和官网两种访问方式。网页版便捷高效，免安装即可使用；官网则提供全面产品信息、下载资源和支持服务。无论个人还是企业用户，都可以通过 DeepSeek 轻松获取和分析海量数据，提升工作效率、辅助决策和促进创新。

百度息壤贝壳获取方法介绍 Mar 28, 2024 am 09:11 AM

在息壤中有不少用户不知道贝壳在哪里，怎么才能获得，有些玩家转了几个小时候都没有找到，下面小编就带来了百度息壤贝壳的获取方法，快来一起看看吧。百度息壤贝壳怎么获得1、首先我们需要来到社区，然后来到下图的这个位置。2、在这里选择目的地，选择进入188层。3、进入到188层后，在周围转悠会有这个提示，点击我知道了就行。4、贝壳的位置可能会有些难找，就在188电梯的后面，有个发光的小点就是贝壳。5、捡贝壳需要用VR手柄才能捡，点击贝壳就可以了。兑换方式1、首先点击页面右上方的“设置”图标，在设置中选择“

百度Apollo重磅发布全球首个支持L4级自动驾驶的大模型Apollo ADFM Jun 04, 2024 pm 08:01 PM

5月15日，百度Apollo在武汉百度萝卜快跑汽车机器人智行谷举办ApolloDay2024，全方位展示百度十年深耕自动驾驶的重大进展，基于大模型带来技术阶跃、面向乘客安全全新定义的无人车和全球最大的无人车自动运营网络，百度已经做到自动驾驶比人类驾驶更安全。得益于此，更加安全舒适、绿色低碳的出行方式正从理想成为现实。百度集团副总裁、智能驾驶事业群组总裁王云鹏现场表示：“我们做无人车的初衷，是满足老百姓日益增长的、对美好出行的向往，人民群众的满意是我们前进的动力。因为安全、所以美好，我们欣喜地看到

Excel搜索快捷键是什么 Mar 20, 2024 am 10:52 AM

想知道Excel搜索快捷键是什么吗？答案很简单，只需要用到【Ctrl+F】就能进行快速搜索了。我们经常用Excel来记录很多不同的数据和名称，如果需要更改的时候，因为数据太多，我们在寻找的时候会很不方便，这样查找起来会相当麻烦。其实，我们完全可以用一下快速搜索的快捷方式来找到我们需要更改的数据！那么，Excel的搜索快捷键是什么呢？今天就来教大家excel表格里面的快捷查找按键，给你们的工作省心省力。这里我用的是本MicrosoftOfficeexcel2010版本来进行演示的，有需要的同学可以

阿里云盘怎么搜索别人的资源 Mar 30, 2024 am 10:31 AM

阿里云盘，这款备受欢迎的存储工具，不仅可以帮助我们高效管理个人资源，还提供了诸多便利功能。那么许多用户在搜索云盘资源的时候，可能会搜不到，所以想要搜索全盘的所有资源，那么在下文中就由本站小编来为大家详细解答这一问题，分享具体的搜索方法，想要了解的用户们就快来跟着本文一起操作了解吧！阿里云盘搜怎么索别人的资源1、首先在阿里云盘的文件夹目录中搜索资源文件的具体路径即可找到对应的文件夹了。2、然后使用文件搜索功能，输入想要查找的关键字即可找到相关的文件内容。3、接着我们通过其他人分享链接，直接定位和下

百度李彦宏率队拜访中国石油，讨论油气行业智能化 May 07, 2024 pm 06:13 PM

本站5月7日消息，5月6日，百度创始人、董事长兼首席执行官李彦宏带队在北京拜访中国石油天然气集团有限公司（以下简称“中国石油”），并与中国石油集团董事长、党组书记戴厚良举行会谈。双方就强化合作，推动能源行业与数字化智能化深度融合进行了深入交流。中国石油将加快推进数字中中国石油建设，加强与百度集团合作，推动能源行业与数字化智能化的深度融合，为保障国家能源安全作出更大贡献。李彦宏表示，大模型展现出的“智能涌现”和理解、生成、逻辑、记忆等核心能力，为前沿科技与油气业务结合打开了更加广阔的想象空间。一直