EasyUI 通过 Combobox 实现 AutoComplete 效果

朋友在做一个web程序，用的EasyUI框架，让我帮忙实现一个自动提示功能。由于之前我也没用过EasyUI框架，就想到了jQueryUI有 AutoComplete 插件，就想直接拿过来用。但当我将jQueryUI集成到项目中时，发现 AutoComplete 插件没有效果。百度发现jQueryUI的AutoComplete 插件和 EasyUI 有冲突，用不了...

既然不行就只能另行找办法了，看到别人回复中提到 EasyUI 框架自带的 Combobox 就可以实现自动提示功能。于是就去官网看了相关文档，最终解决。具体代码如下：

Html （记得加 class="easyui-combox"）

<input id="textFilter" name="textFilter" class="easyui-combox" />

Javascript

$('#textFilter').combobox({mode: 'remote',  //模式： 远程获取数据url: '/Service/EasyUiService.ashx?Method=AutoComplete_ZXJZ',  //远程数据请求地址valueField: 'val', 　　//value对应的属性字段textField: 'txt'　　　 //text对应的属性字段});

当是从远程获取数据的时候，要将 mode 设置为 remote。这样当你输入框的值改变时就会自动去访问 url 请求数据。并且会自动带一个参数名为 q 的参数， q 的值就是你输入框的值。如果没有设置数据访问模式，默认为 POST 请求。浏览器控制台截图如下：

C# （返回 Json 格式数据）

public void AutoComplete_ZXJZ()
{string search = Request["q"];string sql = @"select top 10 txt,val from Fund where code like '%" + search + "%' or name like '%" + search + "%' order by code";DataTable dt = conn.GetDataTable(sql);JsonConvert<object> jc = new JsonConvert<object>();Response.Write(jc.ToDataGrid(dt));
}

因为前端会将输入的值传过来，参数名为 q ，所以后台要接收参数q 。既（string search = Request["q"]）。

转载于:https://www.cnblogs.com/similar/p/8340905.html

EasyUI 通过 Combobox 实现 AutoComplete 效果相关推荐

java swing 自动补全_扩展easyui的combobox组件的自动完成（autocomplete）
update:现有有easyui插件直接提供了该功能. 可以请参考:http://www.easyui-extlib.com/ 里面combobox的根据拼音自动显示.里面各种插件造福大家. ---- ...
easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法
easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库&quo ...
EasyUI的combobox使用总结
一,combobox的属性,事件和方法 combobox可以配置属性,绑定事件监听,调用方法,理解这几个概念之后会对combobox有更清晰的了解. 1,配置属性 combobox可以配置自己的属性, ...
easyUI的combobox选中无法显示
easyUI的combobox选中无法显示最近,在使用easyUI做前台的页面,遇到一个非常奇葩的问题,就是easyUI的combobox,有下拉的内容,但是,选中之后不会显示到其中文本框中. 首先 ...
EasyUI的combobox用法
EasyUI的combobox用法在ITOO中有一个需求,前台使用的是easyUI的框架,这里有几个combobox下拉框,其中的内容都是可选的. 当下拉框中的内容非常多的时候,用户需要选择其中的所 ...
第二百二十三节，jQuery EasyUI，ComboBox(下拉列表框)组件
jQuery EasyUI,ComboBox(下拉列表框)组件,可以远程加载数据的下拉列表组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 C ...
easyui select ajax,easyui的combobox根据后台数据实现自动输入提示功能
easyui的combobox根据后台数据实现自动输入提示功能发布时间:2020-06-11 10:09:41 来源:51CTO 阅读:1981 作者:crackernet adauhuehkek最 ...
easyUI中combobox中idFeild和textFeild的取值方法
easyUI中combobox是比较常用的选择数据的方式,在官方的API说明中是这样描述的:扩展自 $.fn.combo.defaults.使用 $.fn.combobox.defaults重写默认值 ...
easyui中combobox 验证输入的值必须为选项框中的数据
当作为提示框的方式时,combobox必须设置为允许用户输入的模式,但是当用户输入后未选择正确的数据就直接按tab或点击鼠标离开控件会导致用户输入无效的值并且通过验证,为了避免这种情况的发生我们需要对 ...
easyUI的combobox设置隐藏和显示
今天遇到一个需求,需要在combobox选择不同选项时,分别切换另一个控件为text或者combobox. 当时想了各种办法,想将combobx和text切换隐藏,但是都没得到自己想要的效果.最终还是 ...

EasyUI 通过 Combobox 实现 AutoComplete 效果

EasyUI 通过 Combobox 实现 AutoComplete 效果相关推荐

最新文章

热门文章