<!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. 操作系统中堆（heap）与栈（stack）的区别

    主要区别如下: 一.空间分配: 1.堆(操作系统):一般由程序员分配释放,若程序员不释放,程序结束时可能由OS回收,分配方式类似于链表.PS:java中都是系统GC,程序员无法进行GC. 2.栈(操作 ...

  2. mpvue + 微信小程序 picker 实现自定义多级联动 超简洁

    微信小程序官网只提供了省市区的三级联动,实际开发中更多的是自定义的多级联动: 依照微信小程序官网提供的自定义多级联动,需要使用到picker 的多列选择器,即设置 mode = multiSelect ...

  3. 介绍两个好玩的和Github相关的Chrome扩展

    1. Octotree 默认的github网页里的代码显示没有我们在IDE里看到的直观,即代码文件所在的文件夹无法以树形层级结构显示在屏幕左边. 安装Octotree之后: 方便多了. 2. Isom ...

  4. BootStrap【四、插件】

    BootStrap插件基于: 1.BootStrap.js 2.BootStrap.js基于JQuery data属性 1.通过data属性控制页面交互 2.$(document).off('.dat ...

  5. CentOS系统 Amoeba+MySql主从读写分离配置 适合新手傻瓜式教程！-----仅供参考！

    废话不说,直接开始: 一.安装mysql的三种方式,这里采用第2种(安装方式不再详解,请参照) http://www.cnblogs.com/babywaa/articles/4837946.html ...

  6. 判断一个python字符串中是否包含中文字符

    #在python中一个汉字算一个字符,一个英文字母算一个字符 #用 ord() 函数判断单个字符的unicode编码是否大于255即可. def is_contain_chinese(check_st ...

  7. CHANGELOG 的实现

    项目需要写版本信息时有对除了版本号之外更详细的 changelog 的展示, 于是就需要在平时的 git commit 中进行规范, 才能自动生成CHANGELOG.md. Husky 首先本地安装 ...

  8. read char

    char readchar() { ; char ch; bool read = false; while (ch = getchar()) { if (ch == '-' || ch == '+') ...

  9. HDU4465 Candy

    Candy Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  10. CF666E Forensic Examination——SAM+线段树合并+倍增

    RemoteJudge 题目大意 给你一个串\(S\)以及一个字符串数组\(T[1...m]\),\(q\)次询问,每次问\(S\)的子串\(S[p_l...p_r]\)在\(T[l...r]\)中的 ...