经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jquery ui实现文字下拉联想
来源:cnblogs  作者:下页、再停留  时间:2021/5/6 17:56:01  对本文有异议

效果图:输入“伤寒”两个字,会自动联想下拉展示带有“伤寒”两个字的内容

 

 

 

 

前端用的是jquery ui做展示,后端数据接口是json数据

1.前端,引用jquery UI库,包括jquery-ui.min.js和jquery-ui.min.css两个文件

  1. <div class="layui-row" style="width:90%;margin:0.2rem auto; height:auto; ">
  2. <div style="height: 1.4rem; line-height: 0.5rem; ">
  3. <div style=" text-align: left;">原患疾病</div>
  4. <div style="width:100%; float:left;margin-top:0.1rem" >
  5. <!-- 隐藏域 用于接收选重项对应的id-->
  6. <input type="hidden" name="icd_id">
  7. <input type="text" name="icd_name" placeholder="" class="layui-input icd_name">
  8. </div>
  9. </div>
  10. </div>

js代码

  1. $(function() {
  2. $(".icd_name").autocomplete({
  3. source:function(request,response){
  4. var icd_name =$(".icd_name").val();
  5. console.log(icd_name)
  6. $.ajax({
  7. type:"POST",
  8. url:"xxx",
  9. dataType : "json",
  10. cache : false,
  11. async : false,
  12. data : {icd_name:icd_name},
  13. success : function(json) {
  14. var json_data = json['data'];
  15. var eval_data = eval (json_data);//json数组
  16. response($.map(eval_data,function(item){
  17. console.log(item)
  18. return {
  19. label:item.name,//下拉框显示值 label:item.drugwhole
  20. value:item.name,//选中后,填充到input框的值
  21. id:item.id//选中后,填充到id里面的值
  22. }
  23. }));
  24. }
  25. });
  26. },
  27. delay: 200,//延迟100ms便于输入
      //select表示选中后执行的函数,将选中的数据分别赋值到两个输入框重
  28. select : function(event, ui) {
  29. $(".icd_name").val(ui.item.value);  //取出在return里面放入到item中的属性
  30. $('input[name="icd_id"]').val(ui.item.id);
  31. return false;
  32. },
  33. scroll:true,
  34. pagingMore:true,
  35. max:5000
  36. });
  37. });

 

 JQuery UI 下载地址:https://jqueryui.com/download/

原文链接:http://www.cnblogs.com/zxf100/p/14714717.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号