VUE implementation Baidu droppot prompt search function

1. Preparation

Online Great God has done this feature This only implements search function
In order to use Baidu to implement the search function, first understand the data interface

01, prompt data acquisition address

open Baidu The official website opens the developer debugging tool, selects the network one, and then we enter ‘a’ in the search box, will request the request for NetWork, this is the data acquisition address of the prompt data



code is as follows:
where the key “wd =” followed by the search, “cb =” followed by callback Function

When input A, the request prompt data

Vue实现百度下拉提示搜索功能 02: Search function implementation address

After entering “a” in the input box, after clicking the search button, the address in the address bar is the address of the search function

Search address .png

Searching address simplifies before and after comparison, is it very comfortable O (∩_∩) o Vue实现百度下拉提示搜索功能

Simplified address .Png

We use the addresses after simplification, search keyword “s ” test Vue实现百度下拉提示搜索功能

test .png

Second, code implementation

JS code

New Vue ({EL: ‘# APP ‘, Data: {MyData: [], keyword:’ ‘, now: -1}, methods: {get: function (event) {if (event.keycode == 38 || Event.Keycode == 40) Return; if (Event.Keycode == 13) {WINDOW.Open (‘’+.keyword); this.keyword =’ ​​’} this. $ http.jsonp ( ‘’, {wd: this.keyword}, ​​{jsonp: ‘cb’}). The (Function (RES) {this.mydata = res. Data.s; }, function () {};}, selectdown: function () { ++;IF ( == this.mydata.Length) = -1; this.keyword = this.mydata [this.11];}, selectup: function () { -; if (this .now == – 2) = this.mydata.Length-1; this.keyword = this.mydata [];}}})

HTML code

 (* ^ __ ^ *) Temporarily no data  

GET method achieves acquisition Down-down data and search function, after entering keyword, call the GET method to use JSONP to get prompt data, then assign the value to myData, then use V-FOR traversal prompt data
Prompt data.png

then selectDown and Selectup implement the data on the upper and lower selection, implement the search

complete code when pressing the Enter key: https: // Search

The above is all the contents of this articleI hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment