php文本框自动补全,PHP自动补全表单的两种方法

效果图:

第一种:从数据库中检索之后补全

第二种:邮箱等纯前端的补全

先说第二种,使用开源的插件,所以相对简单。

github上面的项目 completer。

https://github.com/fengyuanchen/completer 做法特别容易,github上面有详细的文档。

一开始尝试用这个来配上自己的后台代码,做成第一种的自动补全,搞了半天失败了。可能本人js太差,改动太多的话,代码很复杂,除非认真研究上面这个开源项目。

主要失败在我在后台数据库找出来的完整的模糊查询得到的数据,用上面的插件只能是补全在后面,没有办法完全替换输入值。比如你输入fafe,查到fafegeg, 但是下拉的表项中只能选到 fafefafegeg,因为是补全。

下面说说第一个怎么做,百度不到什么好的经验介绍,就自己按自己的思路实现了:/** * php 返回模糊搜索的结果给自动完成 */ public function actionComplete($value,$blocked) { //将输入的值与用户名和邮箱进行模糊查询 $result1 = User::find()->where(["blocked"=>$blocked])->andWhere(["type"=>$this->type])->andWhere(["like","username",$value])->all(); $result2 = User::find()->where(["blocked"=>$blocked])->andWhere(["type"=>$this->type])->andWhere(["like","email",$value])->all(); $string = ""; foreach ($result1 as $v) { $string = $string.$v->username.","; } foreach ($result2 as $v) { $string = $string."".$v->email.","; } $string = $string.""; //返回格式 类似username1,username2,email1, return $string ; }//前端

检索//JS//autoComplete.css.auto_hidden { width:204px;border-top: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333; position:absolute; display:none;}.auto_show { width:204px; border-top: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333; position:absolute; z-index:9999; /* 设置对象的层叠顺序 */ display:block;}.auto_onmouseover{ color:#ffffff; background-color:highlight; width:100%;}.auto_onmouseout{ color:#000000; width:100%; background-color:#ffffff;}//autoComplete.js/* 通用: 自动补全(仿百度搜索框) */var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id;}var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); }}function AutoComplete(obj,autoObj,arr){ this.obj=$(obj); //输入框 this.autoObj=$(autoObj);//DIV的根节点 this.value_arr=arr; //不要包含重复值 this.index=-1; //当前选中的DIV的索引 this.search_value=""; //保存当前搜索的字符}AutoComplete.prototype={ //初始化DIV的位置 init: function(){ this.autoObj.style.left = this.obj.offsetLeft + "px"; this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px"; this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//减去边框的长度2px }, //删除自动完成需要的所有DIV deleteDIV: function(){ while(this.autoObj.hasChildNodes()){ this.autoObj.removeChild(this.autoObj.firstChild); } this.autoObj.className="auto_hidden"; }, //设置值 setValue: function(_this){ return function(){ _this.obj.value=this.seq; _this.autoObj.className="auto_hidden"; } }, //模拟鼠标移动至DIV时,DIV高亮 autoOnmouseover: function(_this,_div_index){ return function(){ _this.index=_div_index; var length = _this.autoObj.children.length; for(var j=0;jlength){ this.index=0; }else if(this.index==length){ this.obj.value=this.search_value; } this.changeClassname(length); } //光标键"↑" else if(event.keyCode==38){ this.index--; if(this.index

以上所述是小编给大家介绍的PHP自动补全表单的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网页设计网站的支持!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/471522.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring的@Scheduled任务调度

一. 定时任务实现方式 定时任务实现方式: Java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务。使用这种方式可以让你的程序按照某一个频度执行,但不能在指定时间运行。一般用的较少,这篇文章将不做详细介…

LeetCode 2069. 模拟行走机器人 II(模拟)

文章目录1. 题目2. 解题1. 题目 给你一个在 XY 平面上的 width x height 的网格图,左下角 的格子为 (0, 0) ,右上角 的格子为 (width - 1, height - 1) 。 网格图中相邻格子为四个基本方向之一("North","East&quo…

eclipse php xdebug,Eclipse for php + Xdebug搭建PHP的调试环境

Eclipse for php Xdebug搭建PHP的调试环境Eclipse for php Xdebug搭建PHP的调试环境第二步:下载Xdebug (下载地址位于: http://xdebug.org/download.php,我的PHP版本为 PHP 5.3.28 Thread Safety, Apach为2.2.25,使用…

ROS2.9.27架设网吧软路由实战篇之端口映射与回流

转载:http://blog.csdn.net/zm2714/article/details/7924280 上一篇:ROS2.9.27架设网吧软路由实战篇之连通网络,主要讲述了网吧架设软路由ROS2.9.27的基本配置,目的就是使网吧能顺利连接外网。没有涉及到更丰富的其它功能和网络安…

LeetCode 2070. 每一个查询的最大美丽值(离线查询+排序+优先队列)

文章目录1. 题目2. 解题1. 题目 给你一个二维整数数组 items ,其中 items[i] [pricei, beautyi] 分别表示每一个物品的 价格 和 美丽值 。 同时给你一个下标从 0 开始的整数数组 queries 。对于每个查询 queries[j] ,你想求出价格小于等于 queries[j]…

php接收二进制流,php接收二进制流【转】

标签:binary 文件 com post 进制 二进制 tip form 生成文件/** 二进制流生成文件* $_POST 无法解释二进制流,需要用到 $GLOBALS[‘HTTP_RAW_POST_DATA‘] 或 php://input* $GLOBALS[‘HTTP_RAW_POST_DATA‘] 和 php://input 都不能用于 …

提交app时候90475,90474

提交app是遇到如下错误: ERROR ITMS-90475: "Invalid Bundle. iPad Multitasking support requires launch story board in bundle xxxx." ERROR ITMS-90474: "Invalid Bundle. iPad Multitasking support requires these orientations: UIInterfac…

LeetCode 2071. 你可以安排的最多任务数目(二分查找)

文章目录1. 题目2. 解题1. 题目 给你 n 个任务和 m 个工人。每个任务需要一定的力量值才能完成,需要的力量值保存在下标从 0 开始的整数数组 tasks 中,第 i 个任务需要 tasks[i] 的力量才能完成。 每个工人的力量值保存在下标从 0 开始的整数数组 worke…

crontab 执行php脚本,为什么crontab没有执行我的PHP脚本?

我已经构建了一个php文件来检查一些结果,所以我需要设置一个cronjob.我设置一个每30分钟运行一次,以便结果发送.但是,我不知道为什么我的crontab每隔30分钟就没有运行.以下是我设置crontab的方法:*/30 * * * * php /var/www/html/result.php我已经确认我的文件目录是…

用JS来create结点,纯JS代码生成html页面(作业练习)

<script>window.onload function(){document.title 表单示例;var body document.body;// body append child beginvar center document.createElement(center); body.appendChild(center);var h1 document.createElement(h1);h1.innerHTML 增加用户;center.appendC…

LeetCode 2073. 买票需要的时间

文章目录1. 题目2. 解题1. 题目 有 n 个人前来排队买票&#xff0c;其中第 0 人站在队伍 最前方 &#xff0c;第 (n - 1) 人站在队伍 最后方 。 给你一个下标从 0 开始的整数数组 tickets &#xff0c;数组长度为 n &#xff0c;其中第 i 人想要购买的票数为 tickets[i] 。 …

docker php nginx,使用docker快速搭建nginx+php环境

经过了繁琐的docker环境安装&#xff0c;看了下镜像/容器的简单使用&#xff0c;开始进行nginxphp环境的搭建&#xff0c;本文记录一下在安装过程中的笔记。

使用bootstrap-table插件

1.用户提交信息过滤表格内容&#xff1a; a.设置表格查询参数&#xff0c;并在用户提交按钮时候更新表格 <form id"current_table" class"form-inline" role"form" onSubmit"return table_filter(this);">... </form> …

LeetCode 2074. 反转偶数长度组的节点(链表)

文章目录1. 题目2. 解题1. 题目 给你一个链表的头节点 head 。 链表中的节点 按顺序 划分成若干 非空 组&#xff0c;这些非空组的长度构成一个自然数序列&#xff08;1, 2, 3, 4, …&#xff09;。一个组的 长度 就是组中分配到的节点数目。换句话说&#xff1a; 节点 1 分…

php判断全是中文正则,php判断是否为中文正则表达式大全

php判断是否为中文正则表达式大全$str"aaa";if(!eregi("[^\x80-\xff]","$str")){echo "是";}else{echo "不是";}?>$str "中国";echo $str;echo "";//if (preg_match("/^[".chr(0xa1).&q…

[转]Hadoop集群_WordCount运行详解--MapReduce编程模型

Hadoop集群_WordCount运行详解--MapReduce编程模型 下面这篇文章写得非常好&#xff0c;有利于初学mapreduce的入门 http://www.nosqldb.cn/1369099810935.html 转载于:https://www.cnblogs.com/wxquare/p/4889613.html

LeetCode 2075. 解码斜向换位密码(模拟)

文章目录1. 题目2. 解题1. 题目 字符串 originalText 使用 斜向换位密码 &#xff0c;经由 行数固定 为 rows 的矩阵辅助&#xff0c;加密得到一个字符串 encodedText 。 originalText 先按从左上到右下的方式放置到矩阵中。 先填充蓝色单元格&#xff0c;接着是红色单元格…

php 无法加载css文件,解决ThinkPHP样式无法加载问题(CSS,JS),

解决ThinkPHP样式无法加载问题(CSS,JS)解决了ThinkPHP风格无法加载的问题(CSS&#xff0c;JS)&#xff0c;以下是thinkphp框架教程栏目&#xff0c;对ThinkPHP风格无法加载(CSS&#xff0c;JS)问题的解决方案&#xff0c;希望对有需要的人有所帮助&#xff01;1.项目入口文件in…

UI设计培训中所需要的手绘能力

一、漫画 主要不是绘画能力&#xff0c;更重分镜头&#xff0c;叙事能力&#xff0c;脚本编写能力&#xff0c;很多画的不好&#xff0c;但依然存活很多年的漫画还真不少&#xff0c;甚至可以证明&#xff0c;绘画能力的底线可以很低。 二、游戏原画 虽然工作内容是画画&#x…

LeetCode 2076. 处理含限制条件的好友请求(并查集)

文章目录1. 题目2. 解题1. 题目 给你一个整数 n &#xff0c;表示网络上的用户数目。每个用户按从 0 到 n - 1 进行编号。 给你一个下标从 0 开始的二维整数数组 restrictions &#xff0c;其中 restrictions[i] [xi, yi] 意味着用户 xi 和用户 yi 不能 成为 朋友 &#xff…