<!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. JavaScript Basics_Fundamentals Part 1_Variables

    JavaScript Variables JavaScript 变量(Variables)是用于存储数据值的容器. 创建一个 JavaScript 变量,可以使用关键字 let. Example le ...

  2. HTML中由于DIV(块元素)浮动，导致的父元素高度塌陷问题的解决方案

    费话不多说,直接上问题: 1.开始时,页面只有两个DIV的嵌套(见图) 运行结果是: 现在看运行的是正常的,但是当我设置让 class="box2" 的DIV浮动时 运行结果是这样 ...

  3. vue项目之购物车

    简单的完成一个购物车项目,满足基本功能 安装创建好项目以后需要引入安装elementui和vuex 项目目录如下:(home.vue为主页面) ### ~home.vue <template&g ...

  4. 微信小程序跳到指定页面不生效

    wx.redirectTo({ url: './index', }) wx.navigateTo({ url: './index', }) 用了这两种都没生效,点击没跳转,也没报错 后来想了下是不是因 ...

  5. C++ STL 之 list

    #include <list> #include <iostream> using namespace std; // 打印list元素 void PrintList(list ...

  6. InnoDB意向锁的作用

    https://www.zhihu.com/question/51513268?sort=created IX,IS是表级锁,不会和行级的X,S锁发生冲突.只会和表级的X,S发生冲突. 意向锁是一种快 ...

  7. python命令行获取参数

    python命令行获取参数 import sys # python获取参数 input_file = sys.argv[1] output_file = sys.argv[2] print(input ...

  8. CodeForcs 1169B Good Triple

    CodeForcs 1169B Good Triple 题目链接:http://codeforces.com/problemset/problem/1169/B 题目描述:给你m对不超过n的数字,找出 ...

  9. 牛客第十场 F.Popping Balloons

    第一维直接遍历 第二维用线段树维护每个最左端可以得到的贡献 在线段树上每次删除一个点会影响到 X   X-R   X-2*R  3个值 最多操作1e5次 复杂度 6*n*logn(删了还要加回来 #i ...

  10. hdu4786 Fibonacci Tree[最小生成树]【结论题】

    一道结论题:如果最小生成树和最大生成树之间存在fib数,成立.不存在或者不连通则不成立.由于是01图,所以这个区间内的任何生成树都存在. 证明:数学归纳?如果一棵树没有办法再用非树边0边替代1边了,那 ...