总结4:input文本输入框自动提示

1、页面效果

2、引入CSS/JS

  <link rel="stylesheet" href="css/jquery-ui.min.css"><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

3、页面布局以及JS

<div class="searchDiv ui-widget"><input type="search" class="searchInput" id="companyName" placeholder="企业名称" required="true"  style="font-size: 16px;">  <div id="recList" style="display:none;">
<!--示例<div class="rec" data-id="ABCY2FJcC4oMDw6Amd3Z1wgDzAvDSFjZnx%2FKB5QLz0wY35wARlUCY0%3D"><span class="highLight">北京</span>市北京饭店</div> --></div></div><!-- JS使用了H5的input propertychange即时反应-->$("#companyName").on("input propertychange",function(){winner_id = "";var count = $.trim(this.value).length;if(count > 100){this.value = this.value.substring(0,100);return;}if(count == 0){$("#search").addClass("disabled");$("#recList").hide();}else{$("#search").removeClass("disabled");getRecList(this.value);}});function getRecList(entName_key) {var baseUrl = getCtxUrl();$("#recList").html("");$.post(baseUrl+"/getH5CompanyAll",{"companyName":$("#companyName").val()},function(r){if(r){if(typeof (r)!="undefined"){var recList = r;for(var i=0;i<recList.length;i++){var entName = recList[i].companyName;// var id = recList[i]._id;if(entName!="" && entName.length>20){entName = entName.substr(0,20)+"...";}var obj=$("<div class='rec' data-id='' style='text-align: left;'>"+entName.replace(entName_key,"<span class='highLight'>"+entName_key+"</span>")+"</div>");$("#recList").append(obj);}}}$("#recList").show();$(".rec").click(function(){if($(this).text()!=""){$("input").val($(this).text());// winner_id = $(this).attr("data-id");$("#recList").hide();}});});
}

4、后端编码

    /*** 查询所有企业SQL:   select * from companywhere company_name like '%companyName%'limit 25* @return*/@RequestMapping("/getH5CompanyAll")@ResponseBodypublic Object getH5CompanyAll(String companyName) {return companyService.findList(companyName);}

 

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

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

相关文章

MySql数据同步FEDERATED引擎

概要&#xff1a;FEDERATED存储引擎访问在远程数据库的表中的数据&#xff0c;而不是本地的表。这个特性给某些开发应用带来了便利&#xff0c;你可以直接在本地构建一个federated表来连接远程数据表&#xff0c;配置好了之后本地表的数据可以直接跟远程数据表同步。实际上这个…

SpringBoot 配置多数据源(Sql Server、MySql)

创建SpringBoot项目就不说了。(直接使用IDEA创建就好了) 整个目录结构如图&#xff1a;&#xff08;不用管图中报错&#xff0c;项目是在另一台电脑上写的。报错是没有jar包&#xff0c;因为网络比较慢。&#xff09; 1、主要pom.xml <dependencies><dependency>…

SpringBoot 记录操作日志

目录结构&#xff1a; 1、创建springboot项目&#xff0c;添加依赖。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>…

py2.7+pyqt4开发端口检测工具

py2.7pyqt4开发端口检测工具 使用工具&#xff1a;python2.7,pyqt4,pyinstaller,pywin32 先贴代码 1 import sys2 from PyQt4 import QtGui,QtCore3 4 import threading5 import thread6 import os7 import re8 import urllib9 import socket10 import time11 12 13 global max…

opencv 和 parfor

一次遇到两个不熟悉的&#xff0c;因此在一起记一下。 OpenCV的全称是&#xff1a;Open Source Computer Vision Library。 OpenCv是一个基于&#xff08;开源&#xff09;发行的跨平台计算机视觉库&#xff0c;可以运行在Linux,Windows和Mac OS操作系统上。它轻量级而且高效—…

配置错误定义了重复的“system.web.extensions/scripting/scriptResourceHandler” 解决办法...

今天遇到了这个问题&#xff0c; 电脑系统&#xff1a;vs2010 win7系统 iis7 我运行在iis中配置的那个网站后&#xff0c;报错&#xff1a;错误代码 0x800700b7 配置错误定义了重复的“system.web.extensions/scripting/scriptResourceHandler”节 这个问题原因在于window7的II…

Base64 四种方式的编码和解码

base64与字符串String之间的相互转换 package com.wzq;import javax.xml.bind.DatatypeConverter; import java.io.UnsupportedEncodingException; import java.util.Base64;/*** ClassName Base64Utils* Description: TODO* Author wzq* CreateDate 2019/10/14* UpdateDate 2…

邮件服务器“单点登录”功能

现状分析&#xff1a; 相信我们每个人都有这样的经历&#xff0c;比方说银行卡多的人要具体记忆每张卡的密码挺麻烦&#xff1b;现代人兴 趣广泛&#xff0c;爱好多多&#xff0c;运动健身俱乐部、娱乐游戏休闲、购物理财等各种场合少不了获得入门的“通行证”&#xff0c;要输…

【kafka】 windows平台搭建及使用

一、安装 kafka 需要java环境&#xff1b;kafka 最新版本内置了 zookeeper&#xff0c;所以不需要安装zookeeper&#xff1b;下载kafka最新版本&#xff0c;因为下载的是tgz文件&#xff0c;所以不需要安装&#xff0c;解压到相应的地方就可以了。下载地址&#xff1a;http://…

Unix/Linux环境C编程入门教程(16) LinuxMint CCPP开发环境搭建

1.Linux Mint由Linux Mint Team团队于2006年开始发行&#xff0c;是一份基于Debian和Ubuntu的Linux发行版。其目标是提供一种更完整的即刻可用体验&#xff0c;这包括提供浏览器插件、多媒体编解码器、对DVD播放的支持、Java和其他组件&#xff0c;它也增加了一套定制桌面及各种…

Extjs发票管理系统

技术特点&#xff1a;Extjs框架&#xff0c;三层架构&#xff0c;Ajax,json 1.仿office2007菜单.介面美观大方,可动态更改皮肤保存至cookie。 2,json数据源与实体类的相互转换. 3.可下载桌面版登录方式,统计在线人数. 4, chm操作手册,方便操作人员熟悉. 功能描述&#xff1a; 1…

Json串和java对象进行转时

json-lib-xxx.jarezmorph-xxx.jar //>依赖包 JsonConfig config new JsonConfig();//有选择性的过滤掉一些属性值 JSONUtils.getMorpherRegistry().registerMorpher( new DateMorpher(new String[] { "yyyy-MM-dd" }));//注册一个json转为java.util.date的日期格…

Fast Matrix Operations

uva11992:http://uva.onlinejudge.org/index.php?optioncom_onlinejudge&Itemid8&pageshow_problem&problem3143 题意&#xff1a;给你n*m的矩阵初始化的时候矩阵里面的元素全部是0&#xff0c;对于这个矩阵有3中操作。 1 x1 y1 x2 y2 v 把&#xff08;x1 y1 x2…

struts2+jquery 实现ajax登陆

一、新建一个web项目&#xff1a;test,配置好struts2的环境(详细配置见&#xff1a;http://www.cnblogs.com/wuweidu/p/3841297.html) 导入Jquery的js文件到项目 二、在com.action包下&#xff0c;新建一个loginAction.java loginAction.java的代码如下 package com.action;imp…

Docker Kafka 单机版安装

一、安装 下载library/zookeeper并运行 docker run --name zookeeper -d -p 2181:2181 -v /etc/localtime:/etc/localtime library/zookeeper 测试zookeeper端口是否通wget IP:2181 下载wurstmeister/kafka并运行 docker run -d --name kafka -p 9092:9092 --link zookeeper…

Docker 安装nginx,并挂载文件

创建挂载所需目录&#xff1a; mkdir /test/server/nginx/{conf,logs,html,conf.d} /test/server/nginx/conf创建nginx.conf文件&#xff0c;并编辑: user nginx; worker_processes 1;error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid;events {wor…

ArrayList 源码分析

介绍 ArrayList 是一个数组队列&#xff0c;相当于 动态数组。与Java中的数组相比&#xff0c;它的容量能动态增长。 结构 ArrayList继承于AbstractList&#xff0c;实现了List, RandomAccess, Cloneable, java.io.Serializable这些接口。如下图&#xff1a; public class Arra…

Docker 简单入门(一)

Docker 简介 Docker是一个开源的容器引擎&#xff0c;它有助于更快地交付应。Docker可将应用程序和基础设施层隔离&#xff0c;并且能将基础设施当作程序-样进行管理。使用Docker&#xff0c;可更快地打包、测试以及部署应用程序,并可以缩短从编写到部署运行代码的周期。 Docke…

PDF解决方案(2)--文件转PDF

相关专题链接&#xff1a; PDF解决方案&#xff08;1&#xff09;--文件上传 PDF解决方案&#xff08;2&#xff09;--文件转PDF PDF解决方案&#xff08;3&#xff09;--PDF转SWF PDF解决方案&#xff08;4&#xff09;--在线浏览 前言&#xff1a;上一篇中讲到的文件上传&…

Docker 常用命令(二)

Docker 镜像常用命令 搜索镜像 可使用 docker search 命令搜索存放在 Docker Hub 中的镜像。例如&#xff1a; docker search java 执行该命令后&#xff0c; Docker 就会在 Docker Hub 中搜索含有 java 这个关键词的镜像仓库。执行该命令后&#xff0c;可看到类似于如下的表格…