vue+iview远程搜索

利用远程搜索来实时从数据库中调取数据，不必查出所有数据，在数据库内数据庞大的情况下可以显著提高查找效率

html界面代码：

js代码：

getEquipmentListSuc(data){
        	this.equipmentList=data.obj;
        },
        /**
         * 远程搜索
         */
        remoteMethod(query) {
            //query为输入的数据
            if (query !== '') {
                this.loading = true;
                //定时器，限定输入框输入100毫秒后显示查询数据结果
                setTimeout(() => {
                    this.loading = false;
                    let url = '/equipment/selectEquipmentListByEquipName';
                    let data={
                    		equipName:query
                    }
                    callAjaxPost(url,data,this.getEquipmentListSuc);
                    //依据输入框内容生成下拉框数据
                    this.equipmentList = this.equipmentList.filter(item => {
                        return item.label
                                  .indexOf(query) > -1;
                          });
                      }, 100);
                  } else {
                      this.equipmentList = [];
                  }
              }

后端代码：
Controller层

/**
	 * 查询装备信息和id集合
	 * 
	 * @return 装备信息和id集合
	 */
	@RequestMapping(value = "/selectEquipmentListByEquipName", method = RequestMethod.POST)
	public List selectEquipmentListByEquipName(@RequestBody String str) {
		JSONObject strj = JSON.parseObject(str);
		String equipName = strj.getString("equipName");
		return equipmentService.selectEquipmentListByEquipName(equipName);
	}

mapping层

  SELECT
		    id,
		    equip_name
		FROM
		    equipment
		WHERE
		    state = 'A'
        //模糊查询
		
		and LOCATE(#{equipName},equip_name)
		
		ORDER BY
		    id
  

Service层实现类

@Override
	public List selectEquipmentListByEquipName(String str) {
		return equipmentMapper.selectEquipmentListByEquipName(str);
	}