VUE implementation Baidu droppot prompt search function

1. Preparation

Online Great God has done this feature https://github.com/lavyun/vue-demo-search 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

Vue实现百度下拉提示搜索功能

code

code is as follows:

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jQuery110208352732182923484_1497924041050&_=1497924041057#
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

Vue实现百度下拉提示搜索功能
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 (‘https://www.baidu.com/s?wd=’+.keyword); this.keyword =’ ​​’} this. $ http.jsonp ( ‘https://sp0.baidu.com/5a1fazu8aa54nxgko9wtanf6hhy/su’, {wd: this.keyword}, ​​{jsonp: ‘cb’}). The (Function (RES) {this.mydata = res. Data.s; }, function () {};}, selectdown: function () {this.now ++;IF (this.now == this.mydata.Length) this.now = -1; this.keyword = this.mydata [this.11];}, selectup: function () {this.now -; if (this .now == – 2) this.now = this.mydata.Length-1; this.keyword = this.mydata [this.now];}}})

HTML code
   Baidu-search 

{value}}
 (* ^ __ ^ *) 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: //github.com/yanqiangmiffy/baidu- Search

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

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment