`
wj196
  • 浏览: 298355 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

jquery自动完成功能,(边输入边查询)

    博客分类:
  • java
 
阅读更多
引入js
<script type="text/javascript" src="/js/jquery/ui/jquery.ui.autocomplete.js"></script>


jsp代码
	<span>厂商:</span>
	  <label>
 <input id="manufacture_temp" name="manufacture_temp"  type="text"  <c:if test="${article.manufacture!=null}"> value="${article.manufacture}"</c:if> class="inp_h" size="40" maxlength="50" />
 <input id="manufactureId" name="manufactureId"  type="hidden" value="${article.manufactureId}"  />
 <input id="manufacture" name="manufacture"  type="hidden" value="${article.manufacture}"  />
  <tt class="tt_error">*</tt>
 <tt id="manufacture_empty_error" class="tt_error dn">不能为空</tt>
 <tt id="manufacture_error" class="tt_error dn">厂商不存在</tt>     </label>


js代码:

/****
 * 厂商自动完成功能
 */


$(function() {
	
	$( "#manufacture_temp" ).autocomplete({			
		source: function( request, response ) {
		if(trim(request.term)!=""){
			$.ajax({
				url: "/client/manufactureList.json",
				dataType: "json",
				data: {
					featureClass: "P",
					style: "full",
					maxRows: 12,
					name_startsWith: request.term
				},
				success: function( data ) {
					response( $.map( data.factoryList, function( item ) {
						return {
							label:  item.factoryName,
							value: item.factoryName,
							id:	item.factoryId
						}
					}));
				}
			});
		
		}	
		},
		minLength: 1,
		select: function( event, ui ) {
			document.getElementById("manufactureId").value=ui.item.id ;
			document.getElementById("manufacture").value=ui.item.value ;
			document.getElementById("manufacture_temp").disabled="disabled";
         
		},
		open: function() {
			$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
		},
		close: function() {
			$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
		}
	});
});



后台查询代码:


	/**
	 *模糊查询厂商
	 * 
	 * @param req
	 * @param resp
	 * @param modelMap
	 * @return
	 */
	@RequestMapping("/client/manufactureList.json")
	public ModelAndView manufactureList(HttpServletRequest req,
			HttpServletResponse resp,  ModelMap modelMap) {

		
		String param = req.getParameter("name_startsWith");
		try {
			
			param=	new String(param.getBytes("ISO-8859-1"), "UTF-8").trim();
			
		} catch (UnsupportedEncodingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		List<ClientContractPrf>  factoryList= this.clientContractPrfService.queryFactoryList(param);

		modelMap.put("factoryList", factoryList);
		modelMap.put("totalResultsCount", factoryList.size());
		
		return new ModelAndView(jsonView);

	}
}


分享到:
评论

相关推荐

    jquery 自动完成功能

    本篇文章将详细讲解如何利用jQuery实现自动完成功能,这在网页表单输入中十分常见,能提升用户体验,特别是在用户需要从大量数据中选取时。 首先,自动完成功能的核心在于获取用户输入并根据输入内容实时过滤出匹配...

    jquery自动完成输入框

    标题中的“jquery自动完成输入框”指的是使用jQuery库实现的Autocomplete功能,这是一种常见的前端UI交互设计,用于提升用户在输入框中输入信息时的效率和体验。它会在用户输入时提供匹配的建议列表,常见于搜索框、...

    仿百度搜索的jquery自动完成功能包

    "仿百度搜索的jQuery自动完成功能包"正是为了解决这个问题而设计的,它允许开发者轻松地在网页文本框中实现智能搜索提示功能,即用户在输入关键字时,系统会根据已有的数据提供相关的建议,类似百度搜索引擎的搜索...

    jQuery自动完成插件autocomplete.zip

    jQuery自动完成插件是网页开发中常用的一种工具,它能够为用户提供实时的搜索建议,提升输入体验。在标题"jQuery自动完成插件autocomplete.zip"中,我们了解到这是一个基于jQuery库的插件,主要功能是实现自动完成...

    jquery 自动完成输入插件

    《jQuery自动完成输入插件——实现高效用户交互体验》 在网页开发中,提供便捷的用户输入体验至关重要,其中一种常见的方法就是使用自动完成输入功能。jQuery作为一个轻量级、功能丰富的JavaScript库,为开发者提供...

    Jquery+asp.net实现的自动完成功能

    "Jquery+asp.net实现的自动完成功能"这个项目是这样的一个示例,它模仿了百度的搜索提示功能,允许用户输入时提供即时的搜索建议。这个功能通过AJAX技术实现了前端与后端的异步通信,提高了用户体验,减少了不必要的...

    jquery+php查询mysql实现自动完成功能

    自动完成功能的核心在于实时响应用户的输入,并基于输入的部分信息从后端数据库中检索出最匹配的完整选项。这一过程涉及前端与后端的交互:前端负责捕获用户输入并发送请求至服务器;后端则负责处理这些请求,查询...

    这是一款轻量级的jquery自动完成插件

    jQuery自动完成插件是一种便捷的前端开发工具,它极大地提升了用户体验,特别是当用户需要在输入框中输入特定数据时。这款轻量级的jQuery插件设计精巧,旨在帮助用户快速找到并选择匹配的选项,从而减少手动输入的...

    改进版 jquery 仿百度谷歌自动补全输入(支持中文)

    自动补全功能的核心是通过监听用户的输入事件,实时查询数据库或数据源获取匹配的建议,并将这些建议以列表的形式展示在输入框下方。对于英文版的自动补全,这相对简单,因为英文字符的处理逻辑较为固定。然而,中文...

    jquery自动完成控件

    **jQuery 自动完成控件详解*...总的来说,jQuery自动完成控件通过其强大的功能和简洁的API,为Web开发者提供了高效构建搜索框和表单字段自动完成功能的途径。合理利用这个工具,可以显著提升网页的交互性和用户满意度。

    jquery+jsp/html实现自动完成控件功能(有例子)

    在IT领域,自动完成功能是用户界面中常见且实用的一项技术,它极大地提高了用户的输入效率。本示例中,我们将探讨如何使用jQuery、JavaScript、HTML和JSP来实现这一功能,同时结合JSON数据格式,创建一个高效且易于...

    php jquery 自动完成

    2. `autocomplete.js`:这是JavaScript文件,很可能包含了jQuery自动完成功能的主要逻辑,包括监听用户输入、发送AJAX请求、处理响应并更新界面等操作。开发者可以通过查看和修改这个文件来调整自动完成的行为。 3. ...

    jquery自动完成插件收集集合

    在网页开发中,jQuery自动完成插件是一种常见的交互功能,它为用户输入提供即时建议,提升用户体验。这些插件通常用于搜索框、表单输入等场景,帮助用户快速找到他们想要的信息或输入内容。本集合包含了多个优秀的...

    jquery自动完成插件

    在网页设计中,jQuery自动完成插件通常用于表单、搜索框等需要用户输入特定数据的场景。 在jQuery库的支持下,实现自动完成功能并不复杂。首先,你需要在HTML文件中引入jQuery库和对应的自动完成插件文件。常见的...

    基于jQuery+ASP.NET技术实现的输入框提示自动完成功能程序代码

    通过以上步骤,你就可以在jQuery+ASP.NET环境中实现输入框的自动完成功能。这只是一个基础实现,实际应用中可能需要考虑更多细节,如异步加载数据、处理大量数据、支持多条件筛选、优化搜索性能等。不断优化和完善,...

    [ jquery.autocomplete ]jquery的自动完成/补全插件(很好很强大)

    2. **选择元素**:通过 jQuery 的 `$("#inputElement")` 选择你需要添加自动完成功能的输入框。 3. **初始化插件**:调用 `autocomplete()` 方法,并传入配置对象,如数据源、回调函数等。例如: ```javascript $...

    jQuery文本框联想补全自动完成插件

    综上所述,jQuery文本框联想补全自动完成插件提供了强大的功能,能够极大地提升网页输入体验。开发者可以根据项目需求灵活配置和扩展,实现个性化的自动补全效果。同时,结合`style.css`和`index.html`的示例,可以...

    jQuery UI 自动完成插件 autocompleter

    总之,jQuery UI的`autocompleter`插件提供了一种便捷的方式来实现自动完成功能,使得网页应用的交互更加友好。通过灵活的配置和丰富的API,开发者可以轻松地适应各种不同的应用场景,提升用户体验。

    类百度,去哪儿 输入jquery自动完成

    标题中的“类百度,去哪儿 输入jquery自动完成”指的是在网页开发中实现的一种用户输入提示功能,这个功能在用户在输入框中输入文字时,系统能够根据已输入的部分内容,自动显示出一个下拉列表,列表中包含与输入...

    jQuery实现自动补全功能

    "jQuery实现自动补全功能"是一个常见的需求,特别适用于搜索框或者输入字段,以提高用户体验。自动补全功能允许用户在输入时提供预设的建议,从而快速找到他们可能正在寻找的内容。 jQuery的自动补全功能主要依赖于...

Global site tag (gtag.js) - Google Analytics