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

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

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

<div c^ b Y C ]lass="layg + Yui-row">
<div style="height: 1.4remM ] , U; line-height: 0.5rem; ">
<div style=" text-alignO O Q: left;">原患疾病</div>
<div  style="width:100%; float:left;margin-top:0.1rem" >
<!-- 隐藏域  用于接收选重项对应r [ 2 | G的id-->
<input type="X g u _ R ~ U + ]hidden" name="icd_id">, Q D ` p
<input type="text" name="icd_name"   placeholder="" class="layui-input icd_name">@ y [ a E P ?;
</div7 } X>
</div>
</div>

js代码

$(function(^ \ ? ` V x [ %) {
$(".icd_name").autocomplete({
source:function(request,response){
var icd_name =$(".icd_name")\ # I h ( B S !.val();
console.log(icd_name)
$.au L S L X % f ojax({
type:"POST",
url:"xxx",
dataType : "j W 3 _ Yjson",
cache : false,
async : false,
data : {icd_name:icd_name},
success : function(json) {
varL [ ! json_data = json['data'];
var eval_data = es z } - p f xval (js, Y J g bon_data);//json数组
response($.map(eval_data,function(item){
cons4 L q k k U Yole.log(item)
return {
lab5 j t z D T m } xel:item.name,//下拉框显示值 label:item.drugwhole| y c
valu\ b 9 Pe:item.name,//选中后,填A s ^ I /充到input框的值
id:item.id//选中后,填充到id里面的值
            }
}));
}
});
},
delay: 200,//延迟100ms^ w z J便于输入
  //selea { 2ct表示选中后执行的函数,将选中的数据分别赋值到两个输入框重
select : functioZ 3 +n(event, ui) { $(".icd_name").valO = P = / -(ui.item.value);  //取出在retul * 9rn里面放入到item中的属性 $('input[name="icd_id"]').val(ui.item.id); return false; }, scrO X # 6 c Koll:true, pagingMore:true, max:5000 }); });

JQuery UI 下载地址:https://jquer– = m b b w s . Oyui.com/download/

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注