基于Jquery-ui的自动补全

1、添加CSS和JS引用

<script type="text/javascript" src="javascript/jquery-1.7.min.js"></script>
<link rel="stylesheet" href="javascript/menuui/jquery-ui.css" >
<script src="javascript/autocomplete/jquery.ui.core.js"></script>
<script src="javascript/autocomplete/jquery.ui.widget.js"></script>
<script src="javascript/autocomplete/jquery.ui.position.js"></script>
<script src="javascript/autocomplete/jquery.ui.menu.js"></script>
<script src="javascript/autocomplete/jquery.ui.autocomplete.js"></script>

2、在某些使用DIV并设置了z-index的页面里使用可能需要重写css的内容

<style type="text/css">
    .ui-autocomplete{
        display:block;
        z-index:99999;
        width: 200px;
    }
</style>

3、页面初始化后绑定事件

 1 $( "#vip_code" ).autocomplete({
 2             source: function(request, response){
 3                 $.ajax({
 4                     type : "POST",
 5                     url :"<%=basePath%>" + "/xfz/customer.do",
 6                     data : "action=autoSearch&key="+$("#vip_code").val(),
 7                     dataType : "json",
 8                     success : function(jsonObj) {
 9                         response(jsonObj);
10                     }
11                 });
12             },
13             minLength:2, //至少得有2个字符才能触发自动匹配的动作
14             select: function( event, ui ) {
15                 $("#customer_name").val(ui.item.name);
16             }
17         })
18         .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
19             return $( "<li>" )
20                 .append( "<a style=‘font-size:12px;font-family: 微软雅黑;‘>" + item.value + "," + item.name + "," + item.mobilephone + "</a>" )
21                 .appendTo( ul );
22         };

后台返回给前台的是一个如下结构的对象list

 1 public class CustomerAutoInfo {
 2     //value is key value(vipcode/username)
 3     private String value;
 4     private String name;
 5     private String mobilephone;
 6
 7     public String getValue() {
 8         return value;
 9     }
10     public void setValue(String value) {
11         this.value = value;
12     }
13     public String getName() {
14         return name;
15     }
16     public void setName(String name) {
17         this.name = name;
18     }
19     public String getMobilephone() {
20         return mobilephone;
21     }
22     public void setMobilephone(String mobilephone) {
23         this.mobilephone = mobilephone;
24     }
25 }

4.HTML代码

VIP信息员编码 <input type="text" id="vip_code"  onkeydown=‘return checkNum()‘ style="ime-mode:Disabled" onpaste="return !clipboardData.getData(‘text‘).match(/\D\./)"  ondragenter="return false" class="searchinput" />

<label for="customer_name" style="width: 100px;text-align: right;">消费者姓名</label><input type="text" id="customer_name"  onkeydown="if(event.keyCode==32) return false" class="searchinput" />

达到的结果是在VIP信息员编码上输入超过2个数字后提示与之匹配的信息员的   编码,名字,电话号码 信息提示框 供选择,选择完成后自动填充名字的input。

更多详细的用法请参考Jquery-ui的官方文档

时间: 2024-10-09 05:53:22

基于Jquery-ui的自动补全的相关文章

jQuery UI Autocomplete自动补全

项目上用到solr搜索引擎,在输入框输入字符的时候,想做到类似百度的效果,下拉框出现10个建议词条,为此,用上了jQuery UI Autocomplete 做自动补全 jsp页面样例: <%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/view

jquery UI邮箱自动补全

<1> 自动补全(autocomplete),是一个可以减少用户输入完整信息的UI 工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. <html> <head> <title></title> <script src="js/jquery-1.11.2.js"></script> <script src="js/jquery-ui.js"><

07 Jquery UI Autocomplete 自动补全插件

原文地址:https://www.cnblogs.com/springsnow/p/9461710.html

jquery的输入框自动补全功能+ajax

jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端 内容参考网友文章写成,原博的链接找不到了,但是感谢分享! 效果图: 涉及到ajax请求我这里本地请求不到数据就先放测试代码,在文章的最后会放上ajax代码: 用来测试的代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset

solr进阶七:与jQuery结合的自动补全功能

网上有大量的jQuery自动补全功能的插件,我实现这个功能是采用网友写好的纯jQuery代码,而不是采用插件,因为特效会差很多.而后台的数据是从solr那边获取过来,通过整理,放到对象中,再放到集合中,然后在servlet层解开,生成xml文件,返回到前台,形成自动提示补全的功能,流程非常简单,没有采用框架技术,只是用了JSP的servlet来做中间层而已. 目录结构如下: 1.先编写实体类src\com\lifeix\entity\Word.java package com.lifeix.en

基于python机器学习人脸自动补全

import numpy as np import matplotlib.pyplot as plt from sklearn.linear_model import LinearRegression,Ridge,Lasso from sklearn.neighbors import KNeighborsRegressor from sklearn.ensemble import ExtraTreesRegressor from sklearn.datasets import fetch_oli

jQuery Autocomplete ajax自动补全功能 下拉框提示

本来以为会很复杂,原来这么简单 远程调用数据  <script src="./static/public/jquery-1.11.0.min.js"></script>   <script src="./static/public/jqueryui/jquery-ui.js"></script>           <script>   $(function() {       $( "#good

jquery ui 学习随笔 自动补全

一.调用autocomplete()方法 $('#email').autocomplete({ source : ['[email protected]', '[email protected]', '[email protected]'], }); 二.修改autocomplete()样式 由于autocomplete()方法是弹窗,然后鼠标悬停的样式.我们通过Firebug 想获取到悬停 时背景的样式,可以直接通过jquery.ui.css 里面找相应的CSS. //无须修改ui 里的CSS

jquery autocomplete实现读取sql数据库自动补全TextBox

项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下. 1.前台页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

jquery autocomplete 自动补全

写在前面 autocomplete是jqueryUI里的一个插件 效果和说明可以访问这里,作用类似于搜索时的自动提示: 相信用过jQuery autocomplete 自动补全功能同学有不少,但是往往我们所对应的需求不同,有的仅仅是为了省事,敲两个字就有一堆可供选择的信息可供选择,但并不是所有需求都是这样的,我们还有这样的需求,敲两个字,将这个文字对应的实体绑定出来. 主要的参数 jQuery UI Autocomplete常用的参数有: Source:用于指定数据来源,类型为String.Ar