`

ajax + jquery 实现自动完成autocomplete

阅读更多
Code:
  1. <script   src= "${pageContext.request.contextPath}/js/jquery-1.5.1.js" >  
  2. </script>  
  3.         <script type="text/javascript"   
  4.             src="${pageContext.request.contextPath}/js/jquery-ui-1.8.13.custom.min.js" >  
  5. </script>  
  6.         <link rel="stylesheet"  type= "text/css"   
  7.             href="${pageContext.request.contextPath}/css/jquery-ui-1.8.13.custom.css"  />  

代码实现

Code:
  1. <script type= "text/javascript" >  
  2. var  nameDate =  "" ;  
  3. function  onLoadMsg() {  
  4.    $("#cusName" ).autocomplete( {  
  5.         autoFill : false ,  
  6.         matchContains: true ,  
  7.         source : nameDate  
  8.     });  
  9.     var  cusName = $( "#cusName" ).val();  
  10.     jQuery.post("customer_nameSelect?cusName="  + cusName,  function (data) {  
  11.         nameDate = data;  
  12.     });  
  13.       
  14.       
  15. }  
  16. function  onShow(){  
  17. }  
  18. $().ready(function () {  
  19. });  
  20. </script>  

页面文件触发

Code:
  1. <input type= "text"  id= "cusName"  name= "entity.customners.id"   
  2.                                         onkeypress="onLoadMsg()"  onkeyup= "onShow()" >  

效果图

分享到:
评论

相关推荐

    Jquery AutoComplete组件+Ajax实现搜索框输入提示功能小记

    ### Jquery AutoComplete组件+Ajax实现搜索框输入提示功能详解 #### 前言 在当前Web应用开发中,提供良好的用户体验是至关重要的。本文主要介绍如何使用Jquery AutoComplete组件与Ajax技术来实现搜索框的实时输入...

    jquery文本框自动补全ajax autocomplete 完整实例

    在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...

    Autocomplete(自动完成 下拉提示框Ajax+ASP.NET+Jquery)(IE、FF兼容)

    本文将深入探讨如何利用Ajax、ASP.NET和jQuery技术来实现跨浏览器(包括IE和Firefox)的自动完成下拉提示框。 首先,让我们理解自动完成的基本原理。自动完成功能是根据用户在输入框中键入的字符,动态地从服务器...

    jQuery自动完成插件autocomplete.zip

    在标题"jQuery自动完成插件autocomplete.zip"中,我们了解到这是一个基于jQuery库的插件,主要功能是实现自动完成效果。描述中提到的zip文件包含的是该插件的核心组件。 jQuery库是JavaScript的一个轻量级框架,它...

    jquery 自动完成 Autocomplete

    **jQuery自动完成(Autocomplete)** jQuery的自动完成插件是一种强大的交互功能,它允许用户在输入文本时根据已有的数据集快速选择合适的选项。这个功能常见于搜索框、表单填充等场景,极大地提高了用户体验。在本篇...

    搜索栏自动填充Ajax+Jquery

    **Ajax+jQuery实现搜索栏自动填充** 在网页开发中,用户友好的交互设计是提升用户体验的关键因素之一。其中,搜索栏的自动填充功能是常见且实用的特性,它能够帮助用户快速找到他们想要搜索的内容,比如百度搜索...

    ibatis +spring+struts2+jquery.autocomplete实现产品自动补全功能(二) 附带源码

    在本项目中,"ibatis +spring+struts2+jquery.autocomplete实现产品自动补全功能(二) 附带源码",我们探讨的是如何整合四大技术来创建一个高效且用户友好的Web应用程序,特别是在搜索框中实现产品名称的自动补全...

    Ajax jquery 实现自动完成的所有js和css文件

    标题中的"Ajax jQuery 实现自动完成的所有js和css文件"是指使用Ajax技术和jQuery库来创建一个功能,即在用户输入时提供自动填充建议。这种功能常见于搜索框、表单输入等场景,能够提高用户体验,减少用户手动输入的...

    ssh+jquery ajax 实现搜索自动补全

    在本项目"ssh+jquery ajax 实现搜索自动补全"中,主要目标是实现类似百度搜索框的自动补全功能,即用户在输入查询关键字时,系统能实时给出相关的建议,提升用户体验。 **SSH框架**是Java Web开发的三大组件: 1. *...

    JQuery_Ajax_AutoComplete_使用JSON数据

    在探讨如何利用jQuery的AutoComplete插件结合Ajax与JSON数据实现自动补全功能之前,我们首先需要理解几个关键概念:jQuery、Ajax、JSON以及AutoComplete。 ### jQuery简介 jQuery是一款快速、简洁的JavaScript库,...

    php+jquery仿百度搜索提示框autoComplete

    "php+jquery仿百度搜索提示框autoComplete"是一个示例项目,它利用PHP和jQuery技术实现了类似百度搜索引擎的自动补全功能。这个功能允许用户在输入关键词时,系统会实时地根据已有的数据提供匹配的建议,从而加速...

    JQUERY 自动完成autocomplete

    **jQuery 自动完成 Autocomplete 知识点详解** jQuery 的 Autocomplete 是一个强大的插件,它为用户在输入框中输入内容时提供实时的建议或匹配项,极大地提高了用户体验。这个功能广泛应用于搜索框、表单填充等场景...

    jQuery+PHP+Mysql实现输入自动完成提示的功能

    `jquery.ui.autocomplete.css`文件是该插件的样式表,用于定义自动完成提示框的样式,如颜色、字体和布局等。将此CSS文件引入到HTML页面中,可以确保提示框的视觉效果与页面设计保持一致。 `index.html`是项目的主...

    jquery.ui.autocomplete-Ajax

    在本篇中,我们将深入探讨jQuery UI Autocomplete与AJAX的结合使用,以及如何利用它们来实现动态数据加载。 首先,我们需要了解jQuery UI Autocomplete的基本用法。Autocomplete通过监听用户的输入事件,然后根据...

    jquery自动完成.autocomplete

    在本文中,我们将深入探讨如何使用jQuery的Autocomplete插件来实现一个动态的、基于Ajax的自动完成功能。这个功能常用于输入框,当用户输入时,它会根据已有的数据提供匹配的建议,极大地提高了用户体验。我们将讨论...

    jquery easyui TagBox with Autocomplete ajax请求方式自动填充

    在给定的标题“jquery easyui TagBox with Autocomplete ajax请求方式自动填充”中,主要涉及了jQuery EasyUI的TagBox组件,以及其Autocomplete功能与ajax请求方式的结合应用。 TagBox是jQuery EasyUI的一个组件,...

    jquery自动完成autocomplete,兼容各浏览器,支持中文

    总之,jQuery Autocomplete是一个功能强大且灵活的工具,适用于各种场景,尤其是配合JSON数据源,可以轻松实现高效、智能的自动完成功能,同时对中文的支持使得它在处理中文输入时同样表现出色。在实际项目中,...

Global site tag (gtag.js) - Google Analytics