原生input与ul组合模糊匹配

<!DOCTYPE html>

<html>

<style>

.bottomBox {

width: 100%;

display: flex;

/*padding: 10px;*/

}

.bottomBox .leftBox {

width: 50%;

/* height: 200px; */

padding: 0 40px 0 10px;

}

.bottomBox .leftBox .model .topTitle {

display: flex;

justify-content: space-between;

align-items: center;

line-height: 30px;

}

.bottomBox .leftBox .model .topTitle .titles {

font-family: PingFangSC-SNaNpxibold;

font-weight: 600;

font-size: 15.18px;

color: #4F8AFE;

letter-spacing: 0;

}

.bottomBox .leftBox .model .topTitle .symbol {

width: 13.28px;

height: 13.28px;

background: url("../img/add.png") no-repeat;

/* background-position: center 90%; */

background-size: 100% 100%;

}

.bottomBox .leftBox .model ul {

padding: 10px 0;

margin: 0 0 0 10px;

}

.bottomBox .leftBox .model1 li {

display: flex;

/*justify-content: space-between;*/

align-items: center;

height: 45px;

}

.bottomBox .leftBox .model2 li {

display: flex;

justify-content: space-between;

align-items: center;

height: 45px;

}

.bottomBox .leftBox .model li .mes {

width: 90%;

font-family: PingFangSC-Regular;

font-weight: 400;

font-size: 13.28px;

color: #333333;

letter-spacing: 0;

line-height: 13.28px;

height: 34.15px;

background: #F1F3F5;

border-radius: 3.79px;

line-height: 34px;

text-align: left;

display:flex;

align-items: center;

}

.bottomBox .leftBox .model li .mes span{

padding: 0 0 0 10px;

width:50%;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap

}

.bottomBox .leftBox .model li .symbol1 {

width: 8.54px;

height: 17.07px;

background: url("../img/symbolmnfz2.png") no-repeat;

/* background-position: center 90%; */

background-size: 100% 100%;

cursor:pointer;

}

.bottomBox .leftBox .model1 li .symbol1 {

width: 8.54px;

height: 17.07px;

background: url("../img/symbolmnfz2.png") no-repeat;

/* background-position: center 90%; */

background-size: 100% 100%;

margin-right:20px;

cursor:pointer;

}

.bottomBox .leftBox .model li .symbol2 {

width: 13.28px;

height: 13.28px;

background: url("../img/del.png") no-repeat;

/* background-position: center 90%; */

background-size: 100% 100%;

cursor:pointer;

}

.bottomBox .rightBox {

width: 50%;

/* height: 200px; */

padding: 0 40px 0 10px;

}

.bottomBox .rightBox .model .topTitle {

display: flex;

justify-content: space-between;

align-items: center;

line-height: 30px;

}

.bottomBox .rightBox .model .topTitle .titles {

font-family: PingFangSC-SNaNpxibold;

font-weight: 600;

font-size: 15.18px;

color: #4F8AFE;

letter-spacing: 0;

}

.bottomBox .rightBox .model .topTitle .symbol {

width: 13.28px;

height: 13.28px;

background: url("../img/add.png") no-repeat;

/* background-position: center 90%; */

background-size: 100% 100%;

}

.bottomBox .rightBox .model ul {

padding: 10px 0;

margin: 0 0 0 10px;

}

.bottomBox .rightBox .model ul li {

display: flex;

/*justify-content: space-between;*/

align-items: center;

height: 45px;

}

.bottomBox .rightBox .model2 li {

display: flex;

justify-content: space-between;

align-items: center;

height: 45px;

}

.bottomBox .rightBox .model ul li .mes {

width: 90%;

font-family: PingFangSC-Regular;

font-weight: 400;

font-size: 13.28px;

color: #333333;

letter-spacing: 0;

line-height: 13.28px;

height: 34.15px;

background: #F1F3F5;

border-radius: 3.79px;

line-height: 34px;

text-align: left;

/*padding: 0 0 0 10px;*/

display:flex;

align-items: center;

}

.bottomBox .rightBox .model1 ul li .symbol1 {

width: 8.54px;

height: 17.07px;

background: url("../img/symbolmnfz2.png") no-repeat;

/* background-position: center 90%; */

background-size: 100% 100%;

margin-right: 20px;

cursor:pointer;

}

.bottomBox .rightBox .model ul li .symbol1 {

width: 8.54px;

height: 17.07px;

background: url("../img/symbolmnfz2.png") no-repeat;

/* background-position: center 90%; */

background-size: 100% 100%;

cursor:pointer;

}

.bottomBox .rightBox .model ul li .symbol2 {

width: 13.28px;

height: 13.28px;

background: url("../img/del.png") no-repeat;

/* background-position: center 90%; */

background-size: 100% 100%;

cursor:pointer;

}

.bottomBox .rightBox .model li .mes span {

padding: 0 0 0 10px;

width:50%;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap

}

.input-search {

position: relative;

/*margin: 100px auto;*/

/*width: 200px;*/

}

.input-search input {

height: 35px;

padding-left: 10px;

padding-right: 10px;

background-color: #ffffff;

border: solid 1px #e5e5e5;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

outline: none;

-webkit-appearance: none;

appearance: none;

}

.input-search ul {

display: none;

position: absolute;

left:-10px;

bottom: 29px;

width: 100%;

border: solid 1px #62a6da;

max-height: 340px;

overflow-y: auto;

z-index: 1;

font-size: 0;

}

.input-search ul li {

position: relative;

padding-left: 10px;

width: 100%;

height: 34px;

line-height: 34px;

font-size: 14px;

color: #454545;

text-align: left;

background-color: #fff;

cursor: pointer;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.input-search ul li:hover {

color: #fff;

background-color: #1c9dff;

}

</style>

</head>

<body>

</div>

</ul>

</div>

</div>

</ul>

</div>

</div>

</ul>

</div>

</div>

</ul>

</div>

</script>

$(document).ready(function () {

$("#tableTitle").hide();

$("#tableTitles").hide();

window.addEventListener('resize', function () {

//刷新页面

// window.location.reload();

});

mnfzList(zyzdList);

mnfzList2(qtzdList);

mnfzList3(zyssList);

mnfzList4(qtssList);

});

$(function () {

/**按下键盘时搜索*/

$("body").undelegate("input", "keyup").delegate("input", "keyup", function () {

var name = $(this).val().replace(/\s+/g, "");

var inputName=$(this)[0].className;

console.log($(this),inputName);

if(inputName=='leftSearch'){

if (name.length > 0) {

var resultArray = getArrayByName(name, jsonArr);

console.log('11',resultArray)

if (resultArray.length < 1) {

$(this).next("ul").hide();

} else {

var html = "";

for (var i = 0; i < resultArray.length; i++) {

dmObject.dm = resultArray[i].zddm;

console.log($(this)[0].id )

if ($(this)[0].id == "mnzyzd" ){

html += "<li onclick='selectliZyzd($(this),"+JSON.stringify(dmObject)+")'>" + resultArray[i].zdmc + "</li>";

}else {

html += "<li onclick='selectliQtzd($(this),"+JSON.stringify(dmObject)+")'>" + resultArray[i].zdmc + "</li>";

}

$(this).next("ul").html(html).show();

}

}else{

if (name.length > 0) {

var resultArray2 = getArrayByName2(name, jsonArr2);

console.log('22',resultArray2)

if (resultArray2.length < 1) {

$(this).next("ul").hide();

} else {

var html = "";

for (var i = 0; i < resultArray2.length; i++) {

dmObject.dm = resultArray2[i].ssdm;

if ($(this)[0].id == "mnzyss" ){

html += "<li onclick='selectliZyss($(this),"+JSON.stringify(dmObject)+")'>" + resultArray2[i].ssmc + "</li>";

}else {

html += "<li onclick='selectliQtss($(this),"+JSON.stringify(dmObject)+")'>" + resultArray2[i].ssmc + "</li>";

}

$(this).next("ul").html(html).show();

}

})

/**下拉列表展开时点击li的事件,为输入框赋值*/

});

function selectliZyzd(t,dmObject){

$(t).parent("ul").siblings("input").val($(t).text());

$(t).parent("ul").hide();

$(t).parents(".mes").find('.text').html(dmObject.dm);

$(t).parents(".mes").find('.spans').html(dmObject.dm);

let secLiIndex = $(t).parents(".mes").parent().index()

zyzdList[secLiIndex].bm = $(t).text();

zyzdList[secLiIndex].content = dmObject.dm;

console.log('赋值后列表',zyzdList)

}

function selectliQtzd(t,dmObject){

$(t).parent("ul").siblings("input").val($(t).text());

$(t).parent("ul").hide();

$(t).parents(".mes").find('.text').html(dmObject.dm);

$(t).parents(".mes").find('.spans').html(dmObject.dm);

let secLiIndex = $(t).parents(".mes").parent().index()

qtzdList[secLiIndex].bm = $(t).text();

qtzdList[secLiIndex].content = dmObject.dm;

console.log('赋值后列表',qtzdList)

}

function selectliZyss(t,dmObject){

$(t).parent("ul").siblings("input").val($(t).text());

$(t).parent("ul").hide();

$(t).parents(".mes").find('.text').html(dmObject.dm);

$(t).parents(".mes").find('.spans').html(dmObject.dm);

let secLiIndex = $(t).parents(".mes").parent().index()

zyssList[secLiIndex].bm = $(t).text();

zyssList[secLiIndex].content = dmObject.dm;

console.log('赋值后列表',zyssList)

}

function selectliQtss(t,dmObject){

$(t).parent("ul").siblings("input").val($(t).text());

$(t).parent("ul").hide();

$(t).parents(".mes").find('.text').html(dmObject.dm);

$(t).parents(".mes").find('.spans').html(dmObject.dm);

let secLiIndex = $(t).parents(".mes").parent().index()

qtssList[secLiIndex].bm = $(t).text();

qtssList[secLiIndex].content = dmObject.dm;

console.log('赋值后列表',qtssList)

}

var jsonArr = [

{

"name": "计算机组成原理"

{

"name": "jsjzcyl"

{

"name": "计算机网络"

{

"name": "数据结构"

{

"name": "网页程序设计"

{

"name": "嵌入式开发"

{

"name": "高等数学"

{

"name": "计算机应用技术"

{

"name": "计算机科学与技术"

}

];

var jsonArr2 = [

{

"name": "计算机组成原理"

{

"name": "jsjzcyl"

{

"name": "计算机网络"

{

"name": "数据结构"

{

"name": "网页程序设计"

{

"name": "嵌入式开发"

{

"name": "高等数学"

{

"name": "计算机应用技术"

{

"name": "计算机科学与技术"

}

]

$.ajax({

url: "/dip/sjzk/queryIcd10",

contentType: "application/json;charset=UTF-8",

dataType: "json",

type: "post",

// data: JSON.stringify(paramsObject.diags),

success: function (data) {

var list = data.data;

// console.log(list)

jsonArr=list;

}

});

$.ajax({

url: "/dip/sjzk/queryIcd9",

contentType: "application/json;charset=UTF-8",

dataType: "json",

type: "post",

// data: JSON.stringify(paramsObject.diags),

success: function (data) {

var list = data.data;

// console.log(list)

jsonArr2=list;

}

})

/**

* 根据字符串模糊搜索返回符合条件的数据

* name 搜索字符串

* array 检索json数组

* length 匹配结果最大长度

function getArrayByName(name, array) {

if (array.length < 1) {

return;

}

var result = [];

for (var key in array) {

if (checkStrContain(array[key].zdmc, name)) {

result.push(array[key])

}

return result

};

function getArrayByName2(name, array) {

if (array.length < 1) {

return;

}

var result = [];

for (var key in array) {

if (checkStrContain(array[key].ssmc, name)) {

result.push(array[key])

}

return result

}

/**检查一个字符串是否包含在另一个字符串里,并且首字符相同

* i:计算机科学与技术

* j:计科

* 返回true

* */

function checkStrContain(i, j) {

if (!i || !j) {

return false;

}

// if (i.charAt(0) != j.charAt(0)) {

// return false;

// }

i = i.substr(0, i.length);

j = j.substr(0, j.length);

var a;

var b;

if (i.length > j.length) {

a = i;

b = j;

} else {

a = j;

b = i;

}

var count = 0;

for (var bi = 0; bi < b.length; bi++) {

var bArr = b.split("");

if (a.indexOf(bArr[bi]) != -1) {

count++;

} else {

break;

}

if (b.length == count) {

return true;

} else {

return false;

}

var zyzdList=[{

id: 1,

content: "支气管和肺交搭跨越恶性肿瘤的损害1",

bm:'核心病种',

flag: true,

];

var qtzdList= [{

id: 1,

content: "中叶，支气管或肺的恶性肿瘤1",

bm:'核心病种',

flag: true,

{

id: 2,

content: "中叶，支气管或肺的恶性肿瘤2",

bm:'核心病种',

flag: true,

{

id: 3,

content: "中叶，支气管或肺的恶性肿瘤3",

bm:'核心病种',

flag: true,

}, {

id: 4,

content: "中叶，支气管或肺的恶性肿瘤4",

bm:'核心病种',

flag: true,

}

];

var zyssList=[{

id: 1,

content: "支气管和肺交搭跨越恶性肿瘤的损害1",

bm:"核心病种",

flag: true,

];

var qtssList= [{

id: 1,

content: "单根血管操作",

bm:"核心病种",

flag: true,

{

id: 2,

bm:"核心病种",

content: "置入一根血管支架",

flag: true,

{

id: 3,

bm:"核心病种",

content: "经皮冠状动脉球囊扩张成形术",

flag: true,

}

];

//模拟分组列表插入

function mnfzList(arr){

var html="";

arr.forEach((e, i) => {

html += `<li>

</div>

<span class="text">${e.content}</span>

</div>

</li>`

});

$("#zyzdList").html(html);

};

function mnfzList2(arr){

var html="";

arr.forEach((e, i) => {

html += `<li>

</div>

<span class="text">${e.content}</span>

</div>

</li>`

});

$("#qtzdList").html(html);

};

function mnfzList3(arr){

var html="";

arr.forEach((e, i) => {

html += `<li>

</div>

<span class="spans">${e.content}</span>

</div>

</li>`

});

$("#zyssList").html(html);

};

function mnfzList4(arr){

var html="";

arr.forEach((e, i) => {

html += `<li>

</div>

<span class="spans">${e.content}</span>

</div>

</li>`

});

// $.ajax({

// url: "/dip/sjzk/xgfzData",

// contentType: "application/json;charset=UTF-8",

// dataType: "json",

// type: "post",

// data: JSON.stringify(paramsObject.diags),

// success: function (data) {

// console.log(data)

// var list = data.data;

// var s = '<option value="核心病种">核心病种</option>';

// $.each(list, function (i, xx) {

// s = s + '<option value="' + xx.bzlx + '">' + xx.bzlx + '</option>';

// });

// $("#companyIds").html(s);

// $("#companyIds").val(zyssList[0].bm);

// $(".companyIds").html(s);

// arr.forEach((e, i) => {

// $(`#companyIds${i}`).val(e.bm)

// })

// layuiForm.render('select');

// }

// })

$("#qtssList").html(html);

};

function delItem2(i){

qtzdList.forEach((item, index) => {

if (item.id == i) {

qtzdList.splice(index, 1);

console.log("删除成功")

}

qtzdList.forEach((item,index)=>{

item['id']=index+1;

})

mnfzList2(qtzdList);

};

function delItem4(i){

qtssList.forEach((item, index) => {

if (item.id == i) {

qtssList.splice(index, 1);

console.log("删除成功")

}

qtssList.forEach((item,index)=>{

item['id']=index+1;

})

mnfzList4(qtssList);

};

function addItem(){

console.log('add')

var arr={

id: this.qtzdList.length + 1,

content: "支气管和肺交搭跨越恶性肿瘤的损害1",

bm:'核心病种',

flag: true,

};

qtzdList.push(arr);

var html="";

html += `<li>

</div>

<span class="text" title="${arr.content}">${arr.content}</span>

</div>

</li>`

$("#qtzdList").append(html);

}

function addItem2(){

console.log('add')

var arr={

id: this.qtssList.length + 1,

content: "支气管和肺交搭跨越恶性肿瘤的损害1",

bm:'核心病种',

flag: true,

};

qtssList.push(arr);

var html="";

html += `<li>

</div>

<span class="spans" title="${arr.content}">${arr.content}</span>

</div>

</li>`

$("#qtssList").append(html)

}

function changeCon(e,that){

var s1=$(that).parent('li').find('.input-search input').val();

var s2=$(that).parent('li').find('.text').text();

//主要诊断input值

var s3=$("#zyzdList li").find('.input-search input').val();

var s4=$("#zyzdList li").find('.text').text();

console.log(s1,s2,s3,s4)

$("#zyzdList li").find('.input-search input').val(s1);

$(that).parent('li').find('.input-search input').val(s3);

$("#zyzdList li").find('.text').text(s2);

$(that).parent('li').find('.text').text(s4);

let secLiIndex = $(that).parent('li').index()

zyzdList[0].bm = s1;

zyzdList[0].content = s2;

qtzdList[secLiIndex].bm = s3;

qtzdList[secLiIndex].content = s4;

console.log('赋值后列表',secLiIndex,zyzdList,qtzdList)

// var arr=zyzdList[0];

// var arr1=[];

// qtzdList.forEach((item, index) => {

// if (item.id == e) {

// arr1.push(qtzdList[index]);

// qtzdList.splice(index, 1);

// }

// })

// arr1.forEach((item,index)=>{

// item['id']=index+1;

// })

// zyzdList=arr1;

// qtzdList.push(arr);

// qtzdList.forEach((item,index)=>{

// item['id']=index+1;

// })

// console.log(zyzdList,qtzdList);

// mnfzList(zyzdList);

// mnfzList2(qtzdList);

};

function changeCon2(e,that){

var s1=$(that).parent('li').find('.input-search input').val();

var s2=$(that).parent('li').find('.spans').text();

//主要诊断input值

var s3=$("#zyssList li").find('.input-search input').val();

var s4=$("#zyssList li").find('.spans').text();

console.log(s1,s2,s3,s4)

$("#zyssList li").find('.input-search input').val(s1);

$(that).parent('li').find('.input-search input').val(s3);

$("#zyssList li").find('.spans').text(s2);

$(that).parent('li').find('.spans').text(s4);

let secLiIndex = $(that).parent('li').index()

zyssList[0].bm = s1;

zyssList[0].content = s2;

qtssList[secLiIndex].bm = s3;

qtssList[secLiIndex].content = s4;

console.log('赋值后列表',zyssList,qtssList)

}

</script>

</body>

</html>

原生input与ul组合模糊匹配

推荐阅读更多精彩内容