php+mysql+jquery实现简易的检索自动补全提示功能
本文实例讲述了php+mysql+jquery实现简易的检索自动补全提示功能。分享给大家供大家参考，具体如下：
这段时间看了一些关于自动补全提示方面的内容，发现大部分实现过程都十分复杂。心想这应该是一个比较简单的功能啊，于是自己亲自动手来小试一下。思路很常规，需要说明的是没有为提示内容绑定键盘事件，仅可用鼠标操作。
html+jQuery内容：
<html>
<head>
<style type="text/css">
#autoBox
{
margin: 0px;
padding: 0px;
border: 1px solid #CCCCCC;
width: 200px;
}
#autoBox li
{
clear: both;
background-color: white;
color: black;
position: relative;
top: 0px;
left: 0px;
line-height: 25px;
width:200px;
text-align: left;
overflow: hidden;
}
#autoBox li:hover
{
background-color: gray;
color: yellow;
cursor: pointer;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajaxSetup({cache:false}) ; //不缓存
//以下代码用于显示检索提示框
$("#autoBox").hide(); //初始化时隐藏补全提示框
$("#stuSearch").keyup(function(){ //输入框中的keyup事件激活以下查询行为
$("#autoBox").html(""); //先清空补全提示框原有内容
if($("#stuSearch").val().length>0) // 如果输入框不为空
{
$.ajax({ //后台调用php文件进行查询
type:"post",
url:"phpFiles/stuSearch.php",
dataType:"json",
data:{keywords:$("#stuSearch").val()},
success:function(feedbackdata)
{
$("#autoBox").show();// 显示补全提示框
for(i=0;i<feedbackdata.length;i++) //将结果添加到提示框中
{
$("#autoBox").append("<li>"+feedbackdata[i]['truename']+"</li>");
}
$("#autoBox li").on("click",function(){ //为这些新增的li绑定单击事件，单击后将其值赋到输入框中
$("#stuSearch").val($(this).text());
})
$("#autoBox").append("<li style='text-align:right'>关闭</li>");//在提示框的最后添加一个li用来关闭
$("#autoBox li:last").on("click",function(){ // 添加单击事件，单击后隐藏提示框
$("#autoBox").hide();
})
}
});
}
})
})
</script>
</head>
<body>
<input type="text" placeholder="输入您想检索的关键词后回车。" id="stuSearch" name="stuSearch"/>
<ul id="autoBox">
</ul>
</body>
</html>
stuSearch.php代码
<?php
include '../phpFiles/connMysql.php';
$keywords=$_POST['keywords'];
$myrs=mysql_query("select * from users where truename like '".$keywords."%'");
if($myrs)
{
while($row=mysql_fetch_array($myrs))
{
$temp[]=$row;
}
echo(json_encode($temp));
}
?>
效果图
输入时：
点击某一项后：
更多关于PHP相关内容感兴趣的读者可查看本站专题：《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》
希望本文所述对大家PHP程序设计有所帮助。
相关推荐
-
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
本文实例讲述了jQuery数据检索中根据关键字快速定位GridView指定行的实现方法.分享给大家供大家参考,具体如下: 运行截图如下: 具体代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowGridviewContent.aspx.cs" Inherits="ShowGridviewContent" %> <!DOCTYPE
-
jQuery列表检索功能实现代码
先给大家展示下效果图: 这是一个简单的列表 右上角有一个检索功能 我们要实现的是列表检索功能 是用的jquery实现的 具体代码如下 $(function(){ $("input[type=button]").click(function(){ var txt=$("input[type=text]").val(); if($.trim(txt)!=""){ $(".ggsm_list li span").parent().h
-
php+mysql+jquery实现简易的检索自动补全提示功能
本文实例讲述了php+mysql+jquery实现简易的检索自动补全提示功能.分享给大家供大家参考,具体如下: 这段时间看了一些关于自动补全提示方面的内容,发现大部分实现过程都十分复杂.心想这应该是一个比较简单的功能啊,于是自己亲自动手来小试一下.思路很常规,需要说明的是没有为提示内容绑定键盘事件,仅可用鼠标操作. html+jQuery内容: <html> <head> <style type="text/css"> #autoBox { marg
-
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
本文实例讲述了jQuery实现输入框邮箱内容自动补全与上下翻动显示效果.分享给大家供大家参考,具体如下: 最近在做通行证项目,里面注册模块有邮箱注册,需求方想要在输入 @ 后触发下拉框显示各个邮箱,效果如下: html 代码: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>邮箱自动补全</title>
-
jQuery实现Email邮箱地址自动补全功能代码
本文实例讲述了jQuery实现Email邮箱地址自动补全功能代码.分享给大家供大家参考,具体如下: jQuery Email邮箱地址自动补全代码,输入Email时,会自动加入@符号,在输入框中输入"qq"."Sina"."163"等等可以看到效果:鼠标经过提示Email时,高亮该条Email,鼠标点击Email时,文本框内容替换成该条Email,并删除提示层. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js
-
python pycharm中使用opencv时没有代码自动补全提示的解决方案
目录 解决方案有2种 方法1 方法2 注意事项 总结 python pycharm中使用opencv时,没有代码自动补全提示 解决方案有2种 今天工作时突然发现,在写OPENCV相关代码时,没有自动补全提示了,只有几个最最基本的补全函数. 方法1 开始以为是opencv坏了,一通折腾搞不定,又把pycharm重装,还是不行,又把Python重装还是不行.甚至还安装了anaconda都还是不行,之前一直是通过pip3进行安装库文件. 最后发现,似乎是pycharm自动升级之后造成的问题,需要将op
-
Android 自动补全提示输入AutoCompleteTextView、 MultiAutoCompleteTextView
以在搜索框搜索时,自动补全为例: 其中还涉及到一个词,Tokenizer:分词器,分解器. 上效果图: MainActivity.java: package com.joan.testautocomletetextview; import android.R.array; import android.os.Bundle; import android.app.Activity; import android.content.res.Resources; import android.view.
-
jquery 实现输入邮箱时自动补全下拉提示功能
记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能. 实现效果如图所示: 核心代码(需要jquery的支持): (function($){ $.fn.mailAutoComplete = function(options){ var defaults = { boxClass: "
-
jquery 模拟类搜索框自动完成搜索提示功能(改进)
autopoint.js代码: 复制代码 代码如下: /* * @date: 2010-5-22 21:42:15 * @author: 胡灵伟 * Depends: * jquery.js * * function:类似GOOGLE搜索框提示功能 */ (function($) { $.fn.autopoint = function (options) { defaults = { url:options.url, keyLeft : 37,//向左方向键 keyUp : 38,//向上方向键
-
jquery css实现邮箱自动补全
今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果.下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习. HTML代码:emailAutoComple.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>邮箱自动补全&l
-
jQuery实现邮箱下拉列表自动补全功能
记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填写邮箱名字,出现下拉列表,自动补全邮箱 •点击上下按键,选取下拉列表邮箱 •按回车键,选中列表内容,隐藏下拉列表 •鼠标经过,下拉列表选项设置为高亮 •鼠标点击,选中下拉列表选项,隐藏下拉列表 HTML HTML代码很简单,我们就一个简单的输入框,然后一个ul标签,在内部可以放好多li标签. <ht
-
Python实现Tab自动补全和历史命令管理的方法
本文实例讲述了Python实现Tab自动补全和历史命令管理的方法.分享给大家供大家参考.具体分析如下: Python的startup文件,即环境变量 PYTHONSTARTUP 对应的文件 1. 为readline添加tab键自动补全的功能 2. 像Shell一样管理历史命令 代码如下: 复制代码 代码如下: import rlcompleter import readline import atexit import os # http://stackoverflow.com/question