<!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. 【php设计模式】责任链模式

    责任链模式为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这种类型的设计模式属于行为型模式. 在这种模式中,通常每个接收者都包含对另一个接收者的引用.如果一个对 ...

  2. vue学习（7）-路由抽离

    cnpm i vue-router -S

  3. SSISDB8：查看SSISDB记录Package执行的消息

    在执行Package时,SSISDB都会创建唯一的OperationID 和 ExecutionID,标识对package执行的操作和执行实例(Execution Instance),并记录opera ...

  4. python生成式:列表、字典、集合

    python的3类生成式: 列表生成式 字典生成式 集合生成式 1.python列表生成式 my_data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]] print(&quo ...

  5. 五：MVC使用数据库优先(DatabaseFirst)的方式创建数据模型

    1. ORM概念 2. EF的DatabaseFirst模式使用 1. ORM简介 对象关系映射(Object Relational Mapping,简称ORM) ORM技术特点: 1.提高了开发效率 ...

  6. 利用commands模块执行shell命令

    利用commands模块执行shell命令 用Python写运维脚本时,经常需要执行linux shell的命令,Python中的commands模块专门用于调用Linux shell命令,并返回状态 ...

  7. Git远程分支和refs文件具体解释

    推送远程分支到同一个server 比方首先建立gitserver,顺便clone出两个副本 mkdir server cd server git init --bare cd .. git clone ...

  8. SQL 查询今天、昨天、7天内、30天的数据

    今天的所有数据: 昨天的所有数据: 7天内的所有数据: 30天内的所有数据: 本月的所有数据: 本年的所有数据: 查询今天是今年的第几天: select datepart(dayofyear,getD ...

  9. 一个restframework快速实例

    首先在settings.py中引入 INSTALLED_APPS = [ ...... 'rest_framework', ......] 相关模型结构如下: class custume(models ...

  10. CodeForces 839D - Winter is here | Codeforces Round #428 (Div. 2)

    赛后听 Forever97 讲的思路,强的一匹- - /* CodeForces 839D - Winter is here [ 数论,容斥 ] | Codeforces Round #428 (Di ...