仿百度搜索框只能提示上下键移动的功能效果 js+jquery

搜索结果不能上下移动,只能按一下,按第二下的时候结果只剩下一个了,currentSelIndex总是为0

,currentSelIndex是记录
标签id的变量。
首先,我输入一个字符,匹配到的结果会在文本框下方显示出来。因为代码都是写在搜索框的onkeyup
()事件中的,每按一下键盘都会触发该事件,当我第一次按(下)键的时候,相应的会把选中的文本赋

给搜索框,所以按第二次的时候又会重新触发该事件,搜索条件变成了第一次按(下)键文本的值。导

致搜索结果集的长度变成了1,currentSelIndex总是为0。

0

2个回答

  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script>
<input type="text" onkeyup="selectItem(this,event)" onfocus="selectItem(this,event)" id="txt" onblur="hideUL()"/>
<ul id="ul"></ul>
<style>.focus{background:#1049e8;color:#fff}</style>
<script type="text/javascript">
    //键盘按下事件
    Array.prototype.filter = function (v) { var r = []; for (k in this) if (this[k].indexOf(v) != -1) r.push(this[k]); return r; }
    var arr = ["orage", "苹果", "lisa", "2123", "like", "jack", "abcdefg", "pig", "芒果", "shirly", "xg", "One", "live", "Two", "Four"];
    var timer;
    function hideUL() { timer = setTimeout(function () { $('#ul').hide(); }, 200); }
    function selectItem(txt, event) {
        switch (event.keyCode) {
            case 38: //上
                var li = $('#ul li'), fli = li.filter('.focus');
                li.removeClass('focus');
                if (fli.length == 0 || fli.prev().length==0) li.filter(':last').addClass('focus');
                else fli.prev().addClass('focus');
                break;
            case 40: //下
                var li = $('#ul li'), fli = li.filter('.focus');
                li.removeClass('focus');
                if (fli.length == 0 || fli.next().length==0) li.filter(':first').addClass('focus');
                else fli.next().addClass('focus');
                break;
            case 13: //回车
                var li = $('#ul li.focus');
                if (li.length > 0) {
                    $('#txt').val(li.text());
                    li.parent().hide();
                }
                break;
            default:
                if (txt.value != '') {
                    var r = arr.filter(txt.value);
                    $('#ul').html($(r).map(function () { return '<li>' + this + '</li>' }).get().join('')).show()
                    .find('li').click(function () { clearTimeout(timer); $('#txt').val(this.innerHTML) });
                } else $('#ul').hide();
        }
    }
</script>
3
qq_19755427
残缺丶 我把你写的这段代码带进去了,其他的效果都有,也能正确的匹配到结果,不过按上下键没反应,我调试了,它不进去这段代码?怎么搞啊?
3 年多之前 回复
qq_19755427
残缺丶 我把你写的这段代码带进去了,其他的效果都有,也能正确的匹配到结果,不过按上下键没反应,我调试了,它不进去这段代码?怎么搞啊?
3 年多之前 回复
qq_19755427
残缺丶 我把你写的这段代码带进去了,其他的效果都有,也能正确的匹配到结果,不过按上下键没反应,我调试了,它不进去这段代码?怎么搞啊?
3 年多之前 回复

我用的onkeydown事件

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
模仿百度的下拉搜索,上下键控制并赋值
模仿百度的下拉搜索,上下键控制并赋值
jQuery仿google搜索下拉列表 支持键盘上下键 支持鼠标移动
div>    input type="text" name="s" id="word" value="" url="ajax.aspx?id=sousuo" autocomplete="off">         input type="submit" value="搜索">         div id="suggestions">     div>  
jQuery实现搜索框自动提示功能
1.搜索框输入文本,根据搜索框文本变化情况即时通过Ajax向数据库查询搜索建议,并把建议反馈到搜索框下方的搜索建议框中,无搜索建议时自动隐藏建议框边框。 2.数据源从SQL提取解析成XML文档碎片
JS实现输入框类似百度搜索的智能提示效果
先上效果图 现在上代码 .search { left: 0; position: relative; } #auto_div { display: none; wid
JS实现输入框类似百度搜索的智能提示功能,实现提示列表向上弹出
原文链接,请点击我原文的博主写的非常详细,而且对js和css还做了自己的调整,实现的效果也非常好。给的例子也非常全,包括静态的提示和通过ajax方式的提示。我引入到项目中之后,确认可用,但是提示的内容是下拉的出来的,类似百度搜索。但是我实际的需求是输入框在页面的最底部,这就要求提示的内容是向上推出来的。然后查看插件的源码,发现他的在控制下来列表是通过找到页面的body,然后通过相对定位的方式将下来...
jQuery实现百度搜索框
最近项目需求,写了一个类似百度搜索框的功能。 把代码整理了一遍,然后分享出来给大家看看,如果有不对的地方请多指教。 实现效果 使用的语言:html,css,JavaScript,jQuery 代码部分 html部分: &amp;lt;div style=&quot;color: #323232; &quot;&amp;gt; 查找: &amp;lt;input id=&quot;input&quot;/&amp;gt; &amp;lt;...
JS仿百度搜索自动提示框匹配查询功能
1. 添加动态加载css文件 不需要引入css css全部在JS动态生成。 2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置
仿百度搜索框效果
jQuery百度搜索提示框效果代码 $(function(){ $("#tt").bigAutocomplete({ width:543, data:[{title:"中国好声音",result:{ff:"qq"}}, {title:"中国移动网上营业厅"}, {title:"中国银行"}, {title:"中国移动"}, {title:"中国好声音第三期"
jquery防百度搜索框模糊匹配
pageEncoding="utf-8"%> 学生信息管理                        $(function() {  //获取ajxa异步数据(可以根据实际情况,从后台取数据)                 var a= [  "java", "javaScript","aa", "bb", "cac","dd","e"];        
jquery php 百度搜索框智能提示效果
这个程序是利用php+ajax+jquery 实现的一个仿baidu智能提示的效果,有需要的朋友可以下载测试哦。 先来看看效果代码如下index html文件,保保存成index htm 代码如下复制代码
百度搜索框提示功能
1、简单方式 方便的将“百度搜索框(带提示功能)”直接加入到您的网页中。 将以下代码加入到您的网页中, 即可获得带有“搜索框提示”功能的百度搜索框。 HTML代码: 提示:Javascript代码请添加到网页中标签的后面。 2、添加方式 快速的为页面中已有的“百度搜索框”或其他文本输入框添加“百度搜索框提示”功能。 第一步:为
Js实现百度搜索框提示功能(利用百度接口)
这个功能的实现主要使用了jsonp跨域访问, 然后通过回调函数来将搜索到的关联内容显示出来 。 JSONP(JSONwith Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。 回调函数:当一个函数作为另一个函数的参数时,那么这个函数就是回调函数。 效果
jquery+jsp+ajax实现类似的百度搜索下拉框
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> 搜索词自动完成 $(function(){ //取得d
Servlet+Ajax实现简易的仿百度搜索框智能提示
search.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> #mydiv { position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-50px; } .mouseO
Jquery搜索框效果(百度关键词联想)
可以实现关键词联想的搜索框集合了百度谷歌搜狗360腾讯等多家搜索 searchhtml的代码 searchcss的代码如下 keywordjs的代码如下 页面效果如图可以实现关键词联想的,搜索框;集合了百度,谷歌,搜狗,360,腾讯等多家搜索search.html的代码:&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;搜索框例子&lt;/title&gt;
仿百度搜索框自动补全智能提示效果
body {     margin-left: 0px;     margin-top: 0px;     margin-right: 0px;     margin-bottom: 0px; } .auto_hidden {     width:204px;border-top: 1px solid #333;     border-bottom: 1px solid #333;
使用javascript ajax C#实现类似百度的搜索框效果
使用javascript ajax C#实现类似百度的自动搜索效果 文本框下方是一个div,里面是一个ul标签,初始状态此ul中不包含任何的li标签。 当文本框文字改变的时候,使用ajax把文本框内容取出来,传递到后台,在后台中从数据库查询数据并把结果返回到前台页面。 返回的结果格式设置为:A,B,C,D;以便在前台实现字符串分割。 前台页面把返回的字符串切分成数组,依次遍历并给ul添加li节点。
Ajax模仿百度搜索框的自动提示功能
Ajax模仿百度搜索框的自动提示功能    啊啊,熬夜了。今天学习了ajax给我的感觉就是,”哇塞“ajax好酷炫哦,(额。。。后端狗,接触到了大前端的魅力了),这么晚了还是直奔主题把。Let's go!百度搜索提示框,我想大家都很熟悉了把,是什么样子我也就不再赘述。直接看代码来我们写一个简陋的jsp页面  Look! 是这个样子的下面是代码:&amp;lt;%@ page language=&quot;java&quot;...
JS实现仿百度搜索框(实时返回搜索建议项)
实现原理 向输入框动态输入时关键词,将当前关键词作为问号参数后面的值,因为要跨域使用百度的接口,所以通过 JSONP 跨域创建 Ajax 请求。回调函数处理返回值。 尝试研究了一下百度的接口,发现原生的 XHR 接口参数有点复杂(百度应该是考虑了很多情况)。 找了一个 2345 导航,在输入框随便输入一个字母 s,打开 Network,发现它也是向百度的一个地址发送了请求,其中问号后面的‘&amp;amp...
实现类似百度搜索框中模糊提示功能
通常,在我们使用百度的时候,在输入框中输入某一个字段的时候,就可以查询到相关的信息。类似的功能可以通过JS的框架来实现(显然不会像百度那么强大)。jquery提供了一种扩展插件。可以实现获取文本框内容然后自动向后台提交请求。下面通过一段代码来展示这种功能。在使用这种扩展插件的时候,需要使用到 这两个文件。 通过如下代码:$(function(){ applymentAutoCom
用jq实现仿百度搜索框
百度搜索框看似简单,但是涉及到了数据交互,如果能用vue来实现的话会简单很多,现在用jq模仿了一下,写的代码不是一般的多啊! 当然头部要引入jq了html部分 <input type="text" id="txt" /> <input type="button" id="btn" value="百度一下"/> <div class="box" id="
仿百度搜索框提示效果+源代码
仿百度搜索框提示效果+源代码仿百度搜索框提示效果+源代码仿百度搜索框提示效果+源代码
一步一步教你实现仿百度搜索框下拉效果(上)
一步一步教你实现仿百度搜索框下拉效果(上) 最终效果(chrome 下): 搜索框下拉 demo 今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果。 1、html 以及 css 部分 首先你得要有个输入框,这里我用了 <input type='text' /> 控件,其次当用户在输入框中输入内容后,下拉效果随即出现,比如在我的代码中最多会出现 10 个联想词,那么就
移动端类似于百度搜索自动补全功能
选择当前位置 广州体育学院 广州体育学院 广州体育学院 广州体育学院 广州体育学院 --> #city { width: 100%; } #city_header_3 { position: fixed; top: 0; left: 0; z-index: 9999; } #c
jQuery插件:仿百度搜索下拉框Select -可模糊查询
jQuery插件:一个仿百度搜索分页插件,使用简单,兼容很多框架 参照select2、autocomplete 这里可以直接下载demo,也可以在线演示效果。 在线演示 | 在线下载 js调用代码 //简易调用 $('#auto').bigAutocomplete({ data:data1 }); //title $('#title').bigAutocomplete({ data...
C# 实现百度搜索框智能提示功能
原文地址:http://blog.csdn.net/remember_me/article/details/6455051
JAVA___jQuery+AJAX_仿百度搜索功能
JAVA_JQuery+AJAX实现仿百度搜索功能     先给大家看看效果...           具体实现步骤..... 第一步: edit.jsp页面 tr>        td class="rigthtext">选项医生td>         td class="lefttext">input class="width200" maxlength="40" 
使用JQuery完成仿百度的信息提示
使用JQuery完成仿百度的信息提示 1、需求分析 在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的)。 2、步骤分析 1、创建一个数据库和表: 2、设计一个页面 3、文本框绑定一个事件.keyup 4、在keyup所触发函数中: (1)获得文本框的值. (2)将这个值异步提交到服务器.$.post(); (3)提交到Servlet...
百度地图(二) - 模仿百度地图搜索框
百度地图(二) - 模仿百度地图搜索框1 模仿百度地图搜索框 1 在activity_Main在添加 TextView <TextView android:id="@+id/tvSeek" android:layout_marginTop="20dp" android:layout_marginRight="20dp" android
仿百度的下拉菜单原生js
废话不多说直接上demo 登录 微博登录 百度登录 网易登录
下拉框模糊查询,类似于百度搜索效果
详情请走: http://www.365mini.com/page/jquery-ui-autocomplete.htm
JQuery+ajax实现类似百度搜索自动匹配功能
引言    我们接触最多的、用的最多的搜索引擎就是百度了,可以说现在我们的生活如果离开像百度、谷歌这样的搜索引擎还是我们的生活没有了方向,我们在使用的时候都有一个体验就是我我们在输入关键紫的时候,他会自动给我们匹配很多的关键字,像下图所示:            这种非常人性化的功能对于我们在平常开发软件的时候是非常有必要借鉴的,所以在小编最近的项目中就需要用到这个功能给用户
仿百度搜索显示下拉框(二)
我们在上一篇文章中已经实现了下拉框的弹出,这篇文章我们来说实现换色,以及点击跳转怎么实现,我们将代码先展示出来: $(function() { $(&quot;#search&quot;).keyup(function() { var rname = $(this).val(); if (rname != null &amp;amp;&amp;amp; &quot;&quot; != rname) { ...
让input框实现类似百度的搜索提示(基于jquery事件监听)
挺炫的一个效果,百度和谷歌好像已实现好多年了,我以为在网上能轻易找到代码来实现这个效果。真正遇到这个需求,发现还真找不到。于是自己动手写这个效果,由于我是把效果整合到我的整套框架里,所以没有进行单独的封装。 需求: 实现带提示的input框,类似百度搜索,有改动的时候去获取常用关键词,数据来源于系统数据库,支持鼠标选择或键盘选择 思路: 框架一贯思路,通过class作为监听入口,通
超级简单的实现搜索框智能提示 JQuery+Servlet
前台jsp<%-- Created by IntelliJ IDEA. User: Free Date: 2017/5/1 Time: 13:07 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" lan
js实现仿百度地图拖动
最近在项目中需要用到仿百度地图拖动特效,于是花点事件研究了一下,发现通过scrollLeft和scrollTop方法改变滑块的位置可以实现类似效果,下面把研究结果拿出来分享一下。<div id="emap-panel" style="position: relative; overflow: hidden;"> <img id="emap-image"/> </div>overflow: h
原生js仿百度搜索框
Title             fieldset, img, input, button {             border: none;             padding: 0;             margin: 0;             outline-style: none;         }         ul, ol {    
web学习笔记13-移动端搜索框提示功能
最近项目一直在迭代更新,没有什么新的东西做,所以拿出来一个搜索的小模块分享下,功能就是输入关键字能出来相关字的联想吧,删除一些字的时候顺带可以保存上一段的联想,从外观上来看,效果还罢了,这里分享给大家,可以供大家看看。     效果图如下,github链接在此search_demo按照老规矩,下面就直接写编写过程了第一步:创建文件    创建相应的html,js,css文件,引入jquery。
实现百度搜索框提示语功能
利用百度jsonp接口实现搜索提示语. jsonp.js封装 function jsonp(url, options) { // 创建script标签 var $script = document.createElement('script'); // 解决缓存问题 var f = url.indexOf('?') &amp;gt; - 1 ? '&amp;amp;' : '...
用php+ajax写的仿百度谷歌搜索下拉…
用php+ajax写的仿百度谷歌搜索下拉自动提示框效果 ajaxdemo.zip 38KB 包中getdata.php联接数据库代码要修改 文章出自:http://www.daixiaorui.com/read/5.html
文章热词 图像风格转换效果 python集成效果 ai对话机器人演示效果 ai对话机器人词向量投影效果 机器学习
相关热词 bootstrap搜索框功能 bootstrap 下拉提示搜索框 android仿百度外卖波浪 人工智能百度bd41价格 百度人工智能教程