<!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. ffmpeg源码分析之媒体打开过程

    int avformat_open_input(AVFormatContext **ps,           const char *filename,           AVInputForma ...

  2. LeetCode 腾讯精选50题--二叉树中的最大路径和

    二叉树中的最大路径和 题目描述 给定一个非空二叉树,返回器最大路径和,路径指一条从任意节点出发,到达任意节点的序列,该路径至少包含一个节点,且不一定经过根节点 解题思路 树这一类数据结构我还不是很熟悉 ...

  3. asp.net 自动检测缓存内容是否变化

    1 使用cache.Insert方法时,新建一个System.Web.Caching.CacheDependency对象,告诉缓存,当缓存的内容发生变化时,将删除缓存,并重新缓存 using Syst ...

  4. debian设置limits.conf

    最近已经把自己的游戏框架主要功能完成得差不多了,决定将自己的开发环境从debian7升级到debian9,不然太多第三方依赖都跟不上了.debian10刚出来,MongoDB还没适配,所以暂不考虑. ...

  5. Delphi 数组特性

  6. Flutter——GridView组件（网格列表组件）

    GridView组件的常用参数: 名称 类型 说明 scrollDirection Axis 滚动方法 padding EdgeInsetsGeometry 内边距 resolve bool 组件反向 ...

  7. Django—跨域请求

    同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 而如果我们要跳过这个策略,也就是说非要跨域请求,那么就需要通过J ...

  8. PAT Basic 1059 C语言竞赛 (20 分)

    C 语言竞赛是浙江大学计算机学院主持的一个欢乐的竞赛.既然竞赛主旨是为了好玩,颁奖规则也就制定得很滑稽: 0.冠军将赢得一份“神秘大奖”(比如很巨大的一本学生研究论文集……). 1.排名为素数的学生将 ...

  9. 【完美解决】vue，页面跳转样式错位但是刷新又好了的情况

    在vue文件中,做样式分离: 将覆盖样式单独写在一个style标签内,原页面写在 scoped样式作用域下.

  10. java.util.NoSuchElementException

    问题引入 Java商店作业不同函数里需要获取用户输入,用Scanner的时候,出现了异常java.util.NoSuchElementException 作业中代码模式如下,func1和func2中都 ...