<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #search_result{

            width:302px;

            position:absolute;

            left:618px;

            top:180px;

            z-index:1;

            overflow:hidden;

            background:#dcf6f8;

            border:#c5dadb 1px solid;

            border-top:none;

        }

        .line{

            font-size:12px;

            color:#000;

            background:#aed34f;

            width:302px;

            padding:2px;

        }

        .hover{

            background:#007ab8;

            color:#fff;

        }

    </style>

</head>

<body>

<script>

    $(document).ready(function(){

        $('#search').keyup(function(){

            $.ajax{

                type:'GET',

                url:'include/ajax_search.php',//处理页面的url地址

                data:'txt_search='+escape($('#search').val()),//要传递参数

                success:function(data){

                    if(data!=''){

                        var ss;

                        ss=data.split("@");

                        var layer;

                        layer="<table>";

                        for(var i=0;i<ss.length-1;i++){

                            layer+="<tr><td class='line'>"+ss[i]+"</td></tr>";

                        }

                        layer+="</table>"

                        $('#search_result').empty();

                        $('#search_result').append(layer);

                        $('.line:first').addClass('hover');

                        $('#search_result').css('display','');

                        $('.line').hover(function(){

                            $('.line').removeClass('hover');

                            $(this).addClass('hover');

                        },function(){

                            $(this).removeClass('hover');

                        });

                        $('.line').click(function(){

                            $('#search').val($(this).text());

                        })

                    }else{

                        $('#search_result').empty();

                        $('#search_result').css('display','none');

                    }

                },

                error(function() {

                    alert('O No~~~~');

                });

            }esle if(keyCode==38){

                $('#aa tr.hover').prev().addClass('hover');

                $('#aa tr.hover').next().removeClass('hover');

                $('#search').val($('#aa tr.hover').text());

            }else if(keyCode==40){

                $('#aa tr.hover').next().addClass('hover');

                $('#aa tr.hover').prev().removeClass('hover');

                $('#search').val($('#aa tr.hover').text());

            }

        });

    });

    $(document).ready(function(){

        $().click(function(){

            $('#search_result').empty();

            $('#search_result').css('display','none');

        });

    });

</script>

</body>

</html>

jquery+ajax 实现搜索框提示的更多相关文章

  1. jquery ajax请求方式与提示用户正在处理请稍等，等待数据返回时loading的显示

    1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实 ...

  2. 7款基于jquery的动画搜索框

    无论是电商网站,还是媒体网,还是个人博客,每个网站都有属于自己个性化的搜索框.今天小编给大家带来7款基于jquery的动画搜索框.每个搜索框都采用了动画效果,一起看下效果图吧. 在线预览   源码下载 ...

  3. Jquery实现搜索框提示功能

    博客的前某一篇文章中http://www.cnblogs.com/hEnius/p/2013-07-01.html写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发 ...

  4. Servlet+Ajax实现搜索框智能提示

    简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...

  5. css3 jQuery实现3d搜索框+为空推断

    <!DOCTYPE html> <html> <head> <title>css3实现3d搜索框</title> <style> ...

  6. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  7. Servlet+Ajax实现搜索智能提示

    一般在百度搜索框输入关键词时,会弹出一些相关信息提示,方便点选: 页面(search.jsp): <input type="text" name="keyWords ...

  8. JQuery+AJAX实现搜索文本框的输入提示功能

    平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...

  9. jquery php 百度搜索框智能提示效果

    这个程序是利用php+ajax+jquery 实现的一个仿baidu智能提示的效果,有须要的朋友能够下载測试哦. 代码例如以下 index.html文件,保保存成index.htm <!DOCT ...

随机推荐

  1. 关于阮一峰老师es6(第三版)中管道机制代码的理解浅析

    最近正在学习阮一峰老师的es6(第三版)教材,在学到第七章<函数的扩展>中的箭头函数嵌套时,文中提到了一个关于“管道机制”的示例,文中源代码如下: //es6(第三版)教材中的管道机制源代 ...

  2. go语言入门（10）并发编程

    1,概述 1.1并发和并行 并行(parallel):指在同一时刻,有多条指令在多个处理器上同时执行. 并发(concurrency):指在同一时刻只能有一条指令执行,但多个进程指令被快速的轮换执行, ...

  3. DDOS 攻击的防范教程--转载自阮一峰的博客

    一个多月前,我的个人网站遭受 DDOS 攻击,下线了50多个小时.这篇文章就来谈谈,如何应对这种攻击. 需要说明的是,我对 DDOS 并不精通,从没想过自己会成为攻击目标.攻击发生以后,很多素昧平生的 ...

  4. Spark中资源与任务的关系

    在介绍Spark中的任务和资源之前先解释几个名词: Dirver Program:运行Application的main函数(用户提交的jar包中的main函数)并新建SparkContext实例的程序 ...

  5. easyUI 布局

    Layout(布局) 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的. 每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来.布局可以进 ...

  6. Tomcat conf/server.xml 配置项详解

    本文参考来源:https://blog.csdn.net/a314368439/article/details/60132783# <Server port="8005" s ...

  7. 团队第三次作业：Alpha版本第一周小结

    姓名 学号 周前计划安排 每周实际工作记录 自我打分 XXX 061109 1.原型设计与编码任务分配 2.构思程序个性化测试模块的初步实现 1.原型设计与编码任务分配 2.设计了部分类及其成员函数( ...

  8. ubuntu系统---切换Py2.X与Py3.X版本

    ubuntu系统---切换Python2.X与Python3.X版本 Python3.X将成为以后的趋势,Python2.X当前用的稍多的版本,但现在不再更新了.因此,小主电脑里也安装了好两个版本的p ...

  9. java线程基础巩固---采用多线程方式模拟银行排队叫号以及Runnable接口存在的必要性

    采用多线程模拟银行排队叫号: 关于银行拿排队号去叫号的过程我想不必过多解释了,就是有几个业务窗口,并行的处理业务,每处里完一个人,则会叫下一个排队的号去处理业务,一个人是不会被多个窗口工作人员叫号的, ...

  10. Java&Selenium&TestNG&ZTestReport 自动化测试并生成HTML自动化测试报告

    一.摘要 本篇博文将介绍如何借助ZTestReport和HTML模版,生成HTML测试报告的ZTestReport 源码Clone地址为 https://github.com/zhangfei1984 ...