jquery chosen这个插件 可以实现 拼音搜索
2017-11-12 15:04
891 查看
https://github.com/emtiantian/ProblemLog
git地址
说明一下 js源码在../js/chonseOne.js
发现一个错误 在搜索单个汉字的时候搜索不到
已经修复 源码更新
发现 不能全拼搜索
已经修复
现有问题 在全拼搜索后 不能正确显示对应搜索内容 比如 好看 搜索 kan 不能正确的在‘看’字下面添加下划线
暂时去掉这个 下划线功能了 如有需要在改
一款选择插件,支持检索,多选,但不支持输入效果如下图
确定是用的这个哦, 不然可往下看也没有什么意义了
突然发现如果用在省市选择发现有如下问题:
1,不能动态设置值
2,不能动态设置选中
看了好几遍API愣是米有发现有方法可以直接调用。没办法就看源码,发现在其初始化的时候有一个判断如下图:
发现有个destroy是不是("#city).chosen("destroy");就可以了呢。把猜想试了一下果然可以。在这之前调试过其生成的dom想通过直接将其生成的dom移除掉,结果是不可行的,能移除掉,但是就再也无法初始化了。浪费了二三个小时哇。
首先解决第一个问题
[javascript]
view plain
copy
<span style="white-space:pre"> </span>$("#province").change(function(){
$("#city").html("");
$("#city").chosen("destroy");
$("<option value='-1'>-全部-</option>").appendTo("#city");
$.getJSON("${ctx}/api/getCityByProvinceJson.jsp",{
province:$("#province").val()
},function(data){
$.each(data,function(i){
$("<option value='"+data[i].city+"'>"+data[i].city+"</option>").appendTo("#city");
});
$("#city").attr("multiple",true);
$("#city").chosen({
no_results_text : "未找到此选项!",
width:"70%"
});
});
});
$("#city").chosen({
no_results_text : "未找到此选项!",
width:"70%"
});
这样便可动态设置值了,感觉代码有点重复,但是目前还没有找到比较好的方法
下面解决第二个问题
用法跟上面相似,先给select设置值再用初始化下拉框,代码如下:
[javascript]
view plain
copy
<span style="white-space:pre"> </span>$("#city").val("上海");
$("#city").chosen({
no_results_text : "未找到此选项!",
width:"70%"
});
这样便可以动态设置选中了
git地址
说明一下 js源码在../js/chonseOne.js
发现一个错误 在搜索单个汉字的时候搜索不到
已经修复 源码更新
发现 不能全拼搜索
已经修复
现有问题 在全拼搜索后 不能正确显示对应搜索内容 比如 好看 搜索 kan 不能正确的在‘看’字下面添加下划线
暂时去掉这个 下划线功能了 如有需要在改
Jquery chosen动态设置值
Jquery chosen 地址:https://github.com/harvesthq/chosen一款选择插件,支持检索,多选,但不支持输入效果如下图
确定是用的这个哦, 不然可往下看也没有什么意义了
突然发现如果用在省市选择发现有如下问题:
1,不能动态设置值
2,不能动态设置选中
看了好几遍API愣是米有发现有方法可以直接调用。没办法就看源码,发现在其初始化的时候有一个判断如下图:
发现有个destroy是不是("#city).chosen("destroy");就可以了呢。把猜想试了一下果然可以。在这之前调试过其生成的dom想通过直接将其生成的dom移除掉,结果是不可行的,能移除掉,但是就再也无法初始化了。浪费了二三个小时哇。
首先解决第一个问题
[javascript]
view plain
copy
<span style="white-space:pre"> </span>$("#province").change(function(){
$("#city").html("");
$("#city").chosen("destroy");
$("<option value='-1'>-全部-</option>").appendTo("#city");
$.getJSON("${ctx}/api/getCityByProvinceJson.jsp",{
province:$("#province").val()
},function(data){
$.each(data,function(i){
$("<option value='"+data[i].city+"'>"+data[i].city+"</option>").appendTo("#city");
});
$("#city").attr("multiple",true);
$("#city").chosen({
no_results_text : "未找到此选项!",
width:"70%"
});
});
});
$("#city").chosen({
no_results_text : "未找到此选项!",
width:"70%"
});
这样便可动态设置值了,感觉代码有点重复,但是目前还没有找到比较好的方法
下面解决第二个问题
用法跟上面相似,先给select设置值再用初始化下拉框,代码如下:
[javascript]
view plain
copy
<span style="white-space:pre"> </span>$("#city").val("上海");
$("#city").chosen({
no_results_text : "未找到此选项!",
width:"70%"
});
这样便可以动态设置选中了
相关文章推荐
- jquery textSearch实现页面搜索 注意!!!!调用这个插件后,js事件绑定如,on、bind、live delegate全部失效,折腾了我一整天!!!
- Java开发中网页截图的示例,采用jquery.imageaeraselect-0.9.10这个插件实现,自己详细测试过,可以使用。
- bootstap-table 插件,实现自定义搜索
- elasticsearch ik分词实现 中文、拼音、同义词搜索
- 继承类play.PlayPlugin,我们可以实现插件的功能
- jquery autocomplete 实现搜索提示功能,中文/拼音也没问题
- solr入门之拼音加汉字方式的搜索建议自动补全的不高效实现
- Android 实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音
- ios搜索(可实现模糊搜索 支持拼音检索 首字母等)
- Elasticsearch 实现拼音,中文,首字母混合搜索
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- 我有一个想法,组建一个网页搜索采集的team,实现一些有价值的数据,有兴趣的朋友可以联系我
- tableview 也可以实现这个效果,
- elasticsearch ik分词实现 中文、拼音、同义词搜索
- Android 实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音
- 搜索关键字拼音智能提示实现
- Android 利用AutoCompleteTextView实现模糊搜索功能,搜索结果自动提示,识别拼音首字母并转汉字提示
- Android 实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音 .
- Android 实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音
- Android 实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音