Shulou(Shulou.com)06/01 Report--

This article introduces you how to achieve uni-app search function front-end development, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Uni-app search function front and back development (page) with the help of the plug-in address

Plug-in address

Show

SpringBoot development using vue at the front end and Java at the back end

Monitoring search box uni-app

Pay attention to change according to your own needs

Async getSearch (keyword) {let [err, res] = await this.$http.post ('/ shop/search', {name:keyword}); / / request failure handling this.$http.errorCheck (err, res); this.keywordList = []; this.keywordList = this.drawCorrelativeKeyword (res.data.data, keyword);}, / / highlight keywords drawCorrelativeKeyword (keywords, keyword) {var len = keywords.length, keywordArr = []; for (var I = 0; I < len) Var row +) {var row = keywords [I]; / / define highlight # 9f9f9f var html = row.name.replace (keyword, "" + keyword + ""); html ='+ html +''; var tmpObj = {keyword: row.name, htmlStr: html, id:row.id}; keywordArr.push (tmpObj)} return keywordArr }, backend interface developer / * query merchants according to the passed values * @ param name * @ return * / @ ApiOperation (value= "search merchants", notes = "home search merchants") @ ApiImplicitParam (name= "name", value= "merchant names", required = true, dataType = "String") @ RequestMapping (value= "/ search") Method = {RequestMethod.POST}) public Object search (@ RequestParam (defaultValue = "") String name) {List shops = shopService.list (new QueryWrapper () .select ("id", "name") .eq ("flag", 1) .like ("name", name)) Return Result.success (shops);} effect

Change the value of vue binding according to your own needs

Hot search list uni-app// loads popular search async loadHotKeyword () {let [err, res] = await this.$http.get ('/ shop/searchList'); console.log (res); / / request failure handling this.$http.errorCheck (err, res); / / defines hot search keywords, and you can implement ajax request data and assign this.hotKeywordList = res.data.data by yourself. }, backend / * query popular search merchants * @ return * / @ ApiOperation (value = "search hot list", notes = "search hot list") @ GetMapping ("/ searchList") public Object searchList () {List shopSearchs = shopSearchService.list (new QueryWrapper (). OrderByDesc ("number")); return Result.success (shopSearchs) } on how to achieve uni-app search function front-end development to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.