easyui combobox 多选，键盘输入关键字后再通过上下键选择，光标选择的值无法替换掉自己所输入的部分值

qq_33372208 2017-03-29 08:39:25
easyui combobox 多选，键盘输入关键字后再通过上下键选择，光标选择的值无法替换掉自己所输入的部分值
例如：键盘输入a，combobox会显示以a为关键字的列表，这个时候通过上下键选择Alabama,我想要的效果是Alabama值直接替换掉自己输入的a，而实际上却给出的值是a,Alabama。有没有哪个JS高手帮忙解决下，谢谢
easyui combobox 单选不存在这样的问题，多选却不行。晕



代码如下.//easyui 官网的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiline ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Multiline ComboBox</h2>
<p>This example shows how to create a multiline ComboBox.</p>
<div style="margin:20px 0"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<select class="easyui-combobox" name="state" multiple="true" multiline="true" label="Select States:" labelPosition="top" style="width:100%;height:65px;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT" selected>Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA" selected>Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA" selected>Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH" selected>Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR" selected>Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>


</body>
</html>
...全文
347 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_33372208 2017-03-29
  • 打赏
  • 举报
 回复
如果自己要增强这部分功能，就不知道JS该如何写。
斯洛文尼亚旅游 2017-03-29
  • 打赏
  • 举报
 回复
多选就是这样的了，单选才能自动替换。你不想这样就用select2来做
jQuery EasyUI 1.3.6 离线简体中文API文档
最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉，由于很多人和我要chm格式的，所以本次API我提供了2种版本的API，一个还是以前的EXE格式，另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接提供到API包里面，方便没有去官网下载的人直接使用。请大家持续关注我发布的资源，不出意外，我是会一直持续更新本API文档的。本次更新内容大约有30个，Bug修复的只有2个，剩下的全是新增内容，EasyUI的控件已经越来越好用了，顶一个。但是希望能把性能也提升提升，总是感觉在某些情况下EasyUI的性能不是太好。具体更新内容请看下面的说明： jQuery EasyUI 1.3.6版本更新内容： Bug（修复） treegrid：修复“getChecked”方法不能正确的返回被选择的行的问题； tree：修复在“onlyLeafCheck”属性为true时，复选框无法在异步树种正确显示的问题。 Improvement（改进） treegrid：所有的选择和选中的方法都扩展自datagrid组件； linkbutton：添加图标对齐功能的完整支持，可用值有：“top”、“bottom”、“left”、“right”； linkbutton：添加“size”属性，可用值有：“small”、“large”； linkbutton：添加“onClick”事件； menubutton：添加“menuAlign”属性，该属性允许用户设置顶级菜单对齐； combo：添加“panelAlign”属性，可用值有：“left”、“right”； calendar：添加“formatter”、“styler”和“validator”属性，这些属性允许用于自定义日历日期； calendar：添加“onChange”事件； panel：添加“method”、“queryParams”和“loader”选项； panel：添加“onLoadError”事件； datagrid：添加“onBeginEdit”事件，该事件在一个行进入编辑模式时触发； datagrid：添加“onEndEdit”事件，该事件在完成编辑但是编辑器尚未销毁之前触发； datagrid：添加“sort”方法和“onBeforeSortColumn”事件； datagrid：将“combogrid”编辑器集成到datagrid中； datagrid：添加“ctrlSelect”属性，在启用多行选择的时候允许使用Ctrl键+鼠标点击的方式进行多选操作； slider：添加“converter”属性，该属性允许用户决定如何将一个值转换为进度条位置或进度条位置值； searchbox：添加“disabled”属性； searchbox：添加“disable”、“enable”、“clear”、“reset”方法； spinner：添加“readonly”属性、“readonly”方法和“onChange”事件。
jquery-easyui完整demo演示
jquery-easyui完整demo演示
jQuery EasyUI 1.5.1 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示
最近比较忙，抽空做了最新版的API，本次的主要精力就是放在了pdf版的文档上面，看了上一版好多人反应说希望保留chm格式的，所以这一版继续提供chm格式的文档给大家了，现在的版本中包含了PDF、EXE和CHM 3种格式的文档，相信应该可以满足大家的需要了。此外我个人推荐大家使用PDF格式的文档，因为PDF是全新制作的，内容进行了完整校对，所以错漏的地方比EXE和CHM格式要少很多。其它废话就不多说了。更新内容自己看更新说明吧！ jQuery EasyUI 1.5.1版本更新内容： Bug（修复） datagrid：修复在调用“updateRow”方法之后选中和复选行标志丢失的问题； tabs：修复在调用“update”方法的时候导致标签栏工具错位的问题； window：修复在窗体高度设置为“auto”时，当移动窗体后窗体会丢失的问题； messager：修复在现实进度消息窗口后立即关闭该窗口会导致程序发生异常的问题； form：修复“clear”方法无法清除combobox组件选择的下拉项的问题。 Improvement（改进） textbox：可以用“cls”属性添加自定义样式； numberbox：允许用户使用意大利货币格式； combo：添加“multivalue”属性，允许用户决定如何提交多个值； combobox：添加“reversed”属性； combobox：添加“onClick”事件； combogrid：添加“reversed”属性； treegrid：使用Shift键启用多值选择。 New Plugin（新组件） tagbox：允许用户在表单字段上添加标签。
jQuery EasyUI 1.4.2 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示
本次更新内容较多，已有的组件新增了很多新的API，并且首次加入了移动端开发框架，可谓相当给力，新东西自然意味着更多的BUG即将诞生，我个人预计在未来的1~2个版本里会有不少BUG修复的更新内容，今后EasyUI定会发力移动开发方向，所以也算是一个好的开头，虽然目前东西还不是很全，但是基本的也都够用了，希望EasyUI今后会越来越好吧！由于现在工作过于繁忙所以本次API更新延后了快2周，抱歉了！老规矩，介绍一下本次更新内容吧！官方给的更新内容写的不全，我已经全部补全了。包括更新内容中写到的新增API，但是在API文档中没有给出的，在我的API当中全部都有（比官方网站上的还要全 :P） jQuery EasyUI 1.4.2版本更新内容： Bug（修复） treegrid：修复重建treegrid之后列会恢复原始大小的问题。 Improvement（改进） draggable：添加“delay”属性，允许用户延迟拖动操作； tree：添加“filter”属性和“doFilter”方法； tabs：“add”方法允许用户在指定的索引位上插入选项卡面板； tabs：用户可以决定哪些选项卡面板可以被选择； tabs：添加“justified”，“narrow”和“pill”属性； layout：添加“unsplit”和“split”方法； messager：支持键盘导航功能； form：添加“onChange”事件； combobox：添加“queryParams”属性； slider：添加“range”属性； menu：添加“itemHeight”，“inline”，“noline”和“align”属性； panel：添加“header”属性，允许用户自定义面板标题栏； menubutton：添加“hasDownArrow”属性。 New Plugin（新组件） datalist：该组件是展示列表数据的组件，用户可以对列表数据进行分组、单选、多选等各种操作； navpanel：该组件是移动端框架的根组件； mobile：filebox 该组件提供了移动页面堆栈管理和导航。
EasyUI项目
本项目采用struts2+JDBC+easyui进行编写，对easyui各个组件进行详细介绍。 由于水平有限,项目bug在所难免,欢迎指正。 博文参考地址：http://blog.csdn.net/itmyhome1990/article/details/37502601 使用方法： 1、首先你的电脑得安装有mysql、myeclipse 2、执行init.sql里的语句,顺序执行即可。 3、将项目easyui导入到myeclipse中,部署,运行 4、打开浏览器,输入http://localhost:8080/easyui/
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章