如何根据后台接口实现搜索框的功能

悠悠 2022-03-26 09:08 310阅读 0赞

本项目是基于mui实现的搜索框  
搜索方式一：手机键盘输入后直接搜索  
我们的html如下：

js部分如下：  
var wordKey = ‘’;//指后台所需参数  
jiachadan(recordnumber, belongedto, state,wordKey);  
var loginForm = document.forms\[‘loginForm’\],  
user = loginForm.elements\[‘types’\];  
user.oninput = function () \{  
wordKey = user.value  
jiachadan(recordnumber, belongedto, state,wordKey);  
\}  
第三步：经过以上步骤已成功获取到用户键盘输入的字并用参数代替，然后传进后台接口中即可实现搜索功能。

搜索方式二：输入文本后，点击搜索框后的图标进行搜索  
点击后面搜索框后面图标实现搜索功能，点击图标则是一个点击事件，实现步骤就是首先要获取到用户输入的字，  
function proSearchlist(param) \{  
if(param == ‘site’) \{  
document.getElementById(‘infosearchedvalue’).innerText = ‘全部’;  
\}  
// plus.nativeUI.showWaiting(“搜索中，请等待…”);  
EngineeringInfo(‘search’);  
\}  
EngineeringInfo(‘search’);为获取该页面内容的方法，里面带的参数为搜索时的参数，  
if(param == “search”) \{  
var value = document.getElementById(‘infosearchedvalue’).value;  
url = ApiRequest.getApiHost(’\*\*\*\*’) + ‘safety/GetEngineeringCoordinates?site=’ + value;  
\}  
此处将搜索的内容拼接到参数内，所以显示出来的即是用户搜索的内容。

这是一个mui下拉选择框。  
  
未整改  
已整改  
超期未整改