`
若迷尘
  • 浏览: 4122 次
  • 性别: Icon_minigender_2
  • 来自: 临汾
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

autocomplete基本用法

 
阅读更多
<style type="text/css">

.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
.ui-autocomplete {
max-height: 260px;
overflow-y: auto;
prevent horizontal scrollbar
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 20px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}

</style>

$(document).ready( function() {

//兼容火狐浏览器
$('#user').bind( "input.autocomplete", function(){
             $(this).trigger('keydown.autocomplete');
}) ;


$( "#user" ).autocomplete({
source: function( request, response ) {
$("#userId").val("");
$.ajax({
url: "${ctx}/view/base/ViewTaskIndicators.action?getUserList=",
data:"userName=" + encodeURI($("#user").val()),

success: function( data ) {
response( $.map( data, function( item ) {
//手动输入文字不选择也可获得所需信息
if(item.name==$("#user").val()){
$("#userId").val(item.id);
}

return {
label: item.name+"("+item.id+")",//下拉框中所显示的内容
value: item.id + ";" + item.name
}
}));
}
});
},
minLength:1,
select: function( event, ui ) { 
$("#userId").val(ui.item.value);
},
focus: function() {
return false;
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
$("#user").val($("#userId").val().split(";")[1]);
$("#userId").val($("#userId").val().split(";")[0]);
}
});
}

逻辑代码
public Resolution getUserList() {

        service = getBean("taskIndicatorsService", TaskIndicatorsService.class);

        List<UserEntity> getUserList = service.getUserList(userName, null);

        return new JSONResolution(getUserList);
}

public Resolution taskIndicatorsList() {
        // 人员
        getUserList();
      
        return new ForwardResolution(
                "/jsp/report/base/taskIndicators/taskIndicatorsList.jsp");
}
分享到:
评论

相关推荐

    Jquery autocomplete插件使用

    接下来,我们将深入探讨jQuery Autocomplete插件的使用方法、配置选项、事件和数据源。 **1. 安装与引入** 首先,确保已经安装了jQuery和jQuery UI库。如果你还没有,可以通过CDN链接或者下载到本地项目中。引入所...

    Jquery AutoComplete的使用方法实例

    要使用 AutoComplete,首先选择一个输入框元素,然后调用 `autocomplete()` 方法。这里是一个简单的例子: ```html $( function() { $( "#searchBox" ).autocomplete({ source: [ "Apple", "Banana", "Cherry...

    jquery autocomplete下载.rar

    3. **基本使用方法** 首先,确保在页面中引入了 jQuery 和 Autocomplete 的 JS 文件,然后可以这样初始化 Autocomplete: ```html $(document).ready(function() { $('#myInput').autocomplete({ source: ...

    jquery.autocomplete.js使用示例,可直接运行

    **jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件,它为HTML输入框提供了自动补全功能,极大地提升了用户体验。这个插件基于jQuery库,结合Ajax技术,能够实时从服务器获取...

    Jquery AutoComplete 使用demo

    要使用 AutoComplete,你需要在输入框上添加 `autocomplete` 属性,并指定一个方法名,该方法将处理用户输入并返回建议列表。例如: ```html &lt;input type="text" id="search-box" autocomplete="off"&gt; ``` 然后,在 ...

    layui自动填充插件autocomplete.rar

    layui是一款流行的前端JavaScript框架,以其...结合提供的链接(https://www.cnblogs.com/aeolian/p/11993836.html#autoid-6-0-0),可以深入学习更多关于layui自动填充插件的使用方法和技巧,实现更复杂的交互功能。

    jquery autocomplete

    在本文中,我们将深入探讨 jQuery Autocomplete 的原理、配置选项、使用方法以及常见问题的解决策略。 ### 1. 基本原理 jQuery Autocomplete 主要通过监听用户的输入事件,然后根据预定义的数据源动态地生成下拉...

    autocomplete-demo.zip

    jQuery库提供了一个强大的插件——jQuery UI Autocomplete,本文将详细讲解其原理、使用方法以及一个基于2017年版本的`jquery.autocomplete.js`的实际示例。 首先,jQuery Autocomplete是jQuery UI库的一部分,它...

    jquery.autocomplete js包

    **jQuery Autocomplete ...通过以上介绍,我们了解了 `jQuery Autocomplete` 插件的基本原理、使用方法以及优化技巧。在实际项目中,结合自身需求,灵活运用这些知识点,可以创建出高效且用户体验优秀的自动补全功能。

    autocomplete.zip

    本篇文章将深入探讨jQuery Autocomplete插件的使用方法、核心功能以及实际应用中的技巧。 一、jQuery Autocomplete简介 jQuery Autocomplete是一款基于jQuery库的轻量级插件,它能为输入框添加智能搜索和自动补全...

    jQuery-Autocomplete-master

    在本文中,我们将深入探讨jQuery Autocomplete的原理、使用方法以及常见应用场景。 jQuery Autocomplete 是基于 jQuery 库的一个插件,它提供了一个简单的接口,允许开发者快速地为输入框添加自动提示功能。这个...

    jquery-autocomplete

    `jQuery-autocomplete` 是一个基于 jQuery 的开源插件,用于实现自动补全功能。...通过熟练掌握其基本使用方法和配置选项,开发者可以创建出高效、个性化的自动补全功能,提升用户在网站上的搜索体验。

    jquery 自动提示autocomplete

    总之,jQuery Autocomplete是提高网页交互性的强大工具,理解其基本用法和高级特性,能够帮助开发者创建更加智能化和人性化的网页应用。通过灵活运用,你可以为用户提供更高效、更贴心的输入体验。

    jquery autocomplete js 文件

    使用 jQuery 选择器找到输入框,并调用 `autocomplete` 方法来初始化插件。你需要提供一个数据源(可以是静态数组或动态 URL),以及可选的配置参数: ```javascript $("#autocomplete-input").autocomplete({ ...

    autocomplete最新版本js控件和详细用法,不会包教会

    本教程将深入探讨“autocomplete”这个最新版本的JS控件,带你掌握其核心概念、安装步骤、基本用法以及高级特性。 一、核心概念 1. Autocomplete组件:它是一个基于用户输入实时提供匹配建议的UI控件,通常与搜索...

    jquery autocomplete实现框输入提示

    这个示例演示了如何使用 jQuery Autocomplete 实现输入框的智能提示,并通过 AJAX 获取数据源,以及如何自定义 `_renderItem` 方法以显示更丰富的信息。在实际项目中,你可以根据需求调整代码,如添加错误处理、优化...

    autocomplete

    本篇文章将深入探讨jQuery Autocomplete插件的使用方法及其核心特性。 ### 1. 引入资源 使用jQuery Autocomplete插件,首先需要引入以下文件: - `jquery.js`:这是jQuery库的基础文件,提供了JavaScript的DOM操作...

    BootStrap-autocomplete模糊匹配,自动填充

    1. **jQuery**:Bootstrap Autocomplete是建立在jQuery库之上的,因此需要对jQuery的基本操作如DOM操作、事件处理、动画效果等有深入了解。jQuery使得JavaScript代码更加简洁和易用,能够方便地与HTML元素交互。 2....

    jquery autocomplete 动态补全例子有说明ajax加载

    **jQuery Autocomplete基本原理** jQuery UI库包含了Autocomplete组件,它可以与普通的HTML输入框结合,为用户提供实时的补全建议。当用户在输入框中输入字符时,Autocomplete会触发一个事件,通过AJAX请求从服务器...

    jQuery-Autocomplete-master.rar

    5. **基本使用方法**: 要使用jQuery Autocomplete,首先需要引入jQuery和jQuery UI库。然后,选择需要添加此功能的输入框元素,并调用`.autocomplete()`方法,传入配置对象,如数据源(`source`)、触发补全的最小...

Global site tag (gtag.js) - Google Analytics