Jquery Ui AutoComplete自动填写的功能

用到的jquery 和jquery ui 的版本如下:

jQuery v1.12.4

jQuery UI - v1.11.0

有部分版本会有一些这样那样的问题,具体原因未深究。

jquery 的代码如下

$("#id_customer").autocomplete({
            source:function (request,response) {
               var findResult = [];
               $.ajax({
                   url:"/ips/get_customername_list/",
                   data:{"term":request.term},
                   type:‘GET‘,
                   success:function(data){
                       data = JSON.parse(data);
                       console.log(data);
                       var search_cus = request.term;
                       findResult = $.grep(data,function(value,index){
                           return value.indexOf(search_cus) > -1;
                       });
                       response(data);
                   }
               });
           }
        })

ajax到后台获取的数据

后台返回的数据格式是一个数组:[‘data1‘,‘data2‘,‘data3‘........‘data100‘]

有一些需要修改的css样式,具体根据自己的情况调整:

.ui-menu {
 width: 100px;
 list-style: none;
    margin-left: -50px;
    padding-left:0px ;
}
.ui-menu  .ui-menu-item{
    background-color: #fff;
    height: 25px;
    line-height: 25px;
    text-indent: 10px;
}
.ui-menu  .ui-menu-item:hover{
    color:#fff;
    background-color: #1b6d85;
}
.ui-menu .ui-state-focus{
    color:#fff;
    background-color: #1b6d85;
}

原文地址:https://www.cnblogs.com/pyghost/p/11016608.html

时间: 2024-10-06 08:27:58

Jquery Ui AutoComplete自动填写的功能的相关文章

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 autoComplete自动完成

官网:http://jqueryui.com/autocomplete 最简单的形式: var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",  ]; $( "#tags" ).autocomplete({ source:

07 Jquery UI Autocomplete 自动补全插件

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

jQuery Autocomplete 自动补全功能

使用Autocomplete可以很简单的就有文本框的自动补全功能提示了. 在HTML文件中引入autocomplete的js文件和css样式文件,以及autocomplete压缩包中的jQuery的js文件,不要私自用高版本的jQuery,可能会导致显示不出效果. 先来从网友那里拷贝过来的最简单的例子: <span style="font-size:24px;"><!DOCTYPE html> <html> <head> <meta

jQuery UI Autocomplete是jQuery UI的自动完成组件

支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs","博客园","囧月"] 对于JSON格式的Array,则要求有:label.value属性,如下: ? 1 [{label: "博客园", value: "cnblogs"}, {label: "囧月", v

可输入自动匹配Select——jquery ui autocomplete

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>jQuery UI Autocomplete - Combobox</title> 6 <link rel="stylesheet" href="http://code.jquery.com/ui/1.

Jquery ui autocomplete简单api

重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocomplete( "方法名", "参数1", "参数2" ); Autocomplete的方法列表 close() 关闭自动完成显示的菜单. $( "#title" ).autocomplete( "close" );

solr进阶八:jQuery UI Autocomplete与solr搜索结合

大致的流程: 页面捕获到文字 --> 传到servlet(Controller)层,servlet层调用后台 --> 后台根据servlet层传来的参数进行动态从solr中获取数据 --> solr 数据返回到servlet层,解析 --> 展现到页面上. 在solr里面新建一个core,在MySQL数据库里面新建一个表,从这个表导入数据到solr的core中,具体步骤可以上网查或者看我前面的教程. SQL语句: SET FOREIGN_KEY_CHECKS=0; -- -----

jquery ui autocomplete 实现点击文本框,出现所有查询信息效果

直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jqu