index.html

<html>

<head>

    <meta charset="utf-8">

<style>

#search{font-size:14px;}

#search .k{padding:2px 1px; width:320px;}

#search_auto{border:1px solid #817FB2; position:absolute; display:none;}

#search_auto li{background:#FFF; text-align:left;}

#search_auto li.cls{text-align:right;}

#search_auto li a{display:block; padding:5px 6px; cursor:pointer; color:#;}

#search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#;}

</style>

<title>jquery+php实现用户输入搜索内容时自动提示</title>

</head>

<body>

<div id="search">

<input type="text" name="k" /> <input type="button" name="s" value="搜索" />

</div>

<div id="search_auto"></div>

<script src="jquery.min.js"></script>

<script>

$(function(){

    $('#search_auto').css({'width':$('#search input[name="k"]').width()+});

    $('#search input[name="k"]').keyup(function(){

        value = $(this).val();

        $.post('search_auto.php',{'value':$(this).val()},function(data){

            console.log(data);

            if(data=='') $('#search_auto').html("").css('display','none');

            else $('#search_auto').html(data).css('display','block');

        });

    });

});

</script>

</body>

</html>

===================================================== 

 

search_auto.php

 

<?php

    $v=$_POST['value'];

     $conn=mysql_connect("servername ", "username", "password");

     $re=mysql_query("dataname", "select * from `db_table` where title like '%$v%' order by addtime desc limit 10", $conn);

    if(mysql_num_rows($re)<=) exit('');

    echo '<ul>';

    while($ro=mysql_fetch_array($re)) echo '<li><a href="">'.$ro['title'].'</a></li>';

    echo '<li><a href="javascript:;" onclick="$(this).parent().parent().parent().fadeOut(100)">关闭</a& amp; gt;</li>';

    echo '</ul>';

?>

 

jquery+php实现用户输入搜索内容时自动提示的更多相关文章

  1. AutoCompleteTextView 与sqlite绑定实现记住用户输入的内容并自动提示

    把用户输入的内容保存到数据库表中,然后用户输入时,进行模糊查询并把查询结果附到AutoCompleteTextView中. 1:activity_main.xml <LinearLayout x ...

  2. 【Android工具类】用户输入非法内容时的震动与动画提示——EditTextShakeHelper工具类介绍

    转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 当用户在EditText中输入为空或者是数据异常的时候,我们能够使用Toast来提醒用户,除此之外,我们还能 ...

  3. js打印保存用户输入的内容

    在用js打印局部页面时,遇到用户新输入的内容没能打印出来,经过观察,发现我采用的js打印方法是读取页面源代码,而用户输入的内容如果不将其写入到页面源代码中去,是打印不出来的,下面是我的解决方法: // ...

  4. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

  5. DEDECMS织梦全站动态化访问(包括自由列表freelist)及发布内容时自动动态化设置

    DEDECMS织梦 - 全站已有内容全部设置为动态化访问(包括自由列表freelist),以及发布内容时自动为动态化,设置分为三个步骤: 1.将所有文档设置为“仅动态”:执行以下mysql语句:upd ...

  6. （八）solr7实现搜索框的自动提示并统计词频

     solr7实现搜索框的自动提示并统计词频 1:用solr 的suggest组件,统计词频相对麻烦. 2:用TermsComponent,自带词频统计功能. Terms组件提供访问索引项的字段和每个词 ...

  7. 配置eclipse编写html/js/css/jsp/java时自动提示

    配置eclipse编写html/js/css/jsp/java时自动提示步骤: 1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修 ...

  8. [转]MVC+JQuery validate实现用户输入验证

    本文转自:http://www.cnblogs.com/ahui/archive/2010/10/08/1845677.html MVC服务器端: 1.在controller中验证用户输入,如果验证失 ...

  9. vue 用户输入搜索 与无限下拉

    vue项目中,用户输入关键字搜索,并且手机端做无限下拉 watch: { 'getListForm.searchKey'(val) { this.radioChange(); // 还有其他逻辑,内部 ...

随机推荐

  1. 使用 array_multisort 对多维数组排序

    array_multisort() 函数对多个数组或多维数组进行排序. 用法详看:http://www.w3school.com.cn/php/func_array_multisort.asp 例子: ...

  2. Lua函数之二

    Lua函数之二 Lua中函数的两个重要特性: 1.函数和其他类型(如number.string)一样,可以存放在变量中,也可以存放在table中,可以作为函数的参数,还可以作为函数的返回值. 2.嵌套 ...

  3. 图解equals与hashcode方法相等/不相等的互相关系

    图解:比如equals相等的箭头指向hashcode相等,表示equals相等那么必有hashcode相等.而有两个箭头指向别人的表示可能是其中之一,比如hashcode相等,那么有可能equals相 ...

  4. Hibernate执行原生SQL返回List<Map>类型结果集

    我是学java出身的,web是我主要一块: 在做项目的时候最让人别扭的就是hibernate查询大都是查询出List<T>(T指代对应实体类)类型 如果这时候我用的联合查询,那么返回都就是 ...

  5. [官方教程] [ES4封装教程]1.使用 VMware Player 创建适合封装的虚拟机

    [转载处,http://bbs.itiankong.com/] 前言: 首先要明确的一点,系统封装操作的源计算机一般为虚拟计算机(简称虚拟机.VM等),这也是为什么我们要在封装教程的第一章就专门学习虚 ...

  6. Linux tar命令exclude选项排除指定文件或目录

    在linux中可以用tar打包目录以方便传输or备份,我们先来看一个例子 test 文件夹有如下文件 [root@lee ~]# ll test 总用量 -rw-r--r--. root root 4 ...

  7. HDOJ 1878 欧拉回路 nyoj 42一笔画问题

    #include<cstdio> #include<cstring> ]; int find(int x) { if(visited[x]!=x) return find(vi ...

  8. centos rm -rf 恢复删除的文件

    Linux有时候执行了 rm -rf 等操作误删了文件绝对是一件可怕的事情,好在有一些解决的办法可以临时救急.这时我们就要用到一款叫做extundelete的工具了. 目录[-] 依赖 安装 查找要恢 ...

  9. 【Python】Django支持事务方式

    代码: with transaction.atomic(): for i in xrange(int(svc_instance_num)): tmp_fileprotect_svc_instance ...

  10. java面试总结-(hibernate ibatis struts2 spring)

    说说Hibernate对象的三种状态 Hibernate对象有三种状态,分别是:临时态(Transient). 持久态(Persistent).游离态(Detached). 临时状态:是指从对象通过n ...