vue之搜索聯想 · 前端技術總結

搜索聯想使用vue來實現爽多了，比以前使用js或jquery方便多了，這種動態數據響應的使用vue簡直太合適不過了，下面來看下簡例吧懶得寫css樣式了，將就看吧 ![](https://box.kancloud.cn/444a54e093d27d98f931cd748685f1a5_232x107.jpg) 對應的代碼，數據是靜態的，很直觀有木有。。 demo.html ~~~ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>搜索聯想</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="searchVal" v-bind:placeholder="placeholder" v-on:keyup="searchFn"> <ul> <li v-for="item in searchResult" v-on:click="alertFn">{{ item.name }}</li> </ul> </div> <script> var dataList = [ {name: 'tom'}, {name: 'jack'}, {name: 'john'}, {name: 'rose'}, {name: 'mark'} ]; var app = new Vue({ el: '#app', data: { placeholder: '請輸入搜索內容', searchVal: '', searchResult: [] }, methods: { searchFn: function(e) { var val = e.target.value; this.searchResult = []; if(val) { dataList.forEach(function(item) { var pattern = new RegExp('^'+val, 'g'); if(pattern.test(item.name)) { this.searchResult.push({name: val}); } }.bind(this)); // 綁定當前實例對象 } }, alertFn: function(e) { var text = e.target.innerText; alert(text); } } }); </script> </body> </html> ~~~ 如果沒看過癮，那么滿足客觀的需求，再來個ajax請求后端返回的搜索聯想，代碼如下。 demo.php ~~~ <?php $data = array( // 數據 array('name'=>'tom'), array('name'=>'jack'), array('name'=>'john'), array('name'=>'rose'), array('name'=>'mark') ); $search = $_GET['search']; // url參數 $pattern = '/^'.$search.'/'; // 正則 $responseData = array(); foreach($data as $k=>$v) { foreach($v as $k2=>$v2) { if(preg_match($pattern, $v2)) { array_push($responseData, array('name'=>$v2)); } } } echo json_encode($responseData); ~~~ demo.html ~~~ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>搜索聯想</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="searchVal" v-bind:placeholder="placeholder" v-on:keyup="searchFn"> <ul> <li v-for="item in searchResult" v-on:click="alertFn">{{ item.name }}</li> </ul> </div> <script> // ajax簡單封裝 function ajax(opts) { var xhr = new XMLHttpRequest(); xhr.open(opts.type, opts.url, true); xhr.responseType = 'json'; xhr.send(null); xhr.onreadystatechange = function() { if(xhr.readyState===4 && xhr.status===200) { opts.success(xhr.response); } } } // vue實例 var app = new Vue({ el: '#app', data: { placeholder: '請輸入搜索內容', searchVal: '', searchResult: [] }, methods: { searchFn: function(e) { var val = e.target.value; this.searchResult = []; if(val) { ajax({ type: 'get', url: 'demo.php?search='+val, success: function(result) { result.forEach(function(item) { this.searchResult.push({name: val}); }.bind(this)); }.bind(this) }); } }, alertFn: function(e) { var text = e.target.innerText; alert(text); } } }); </script> </body> </html> ~~~ 如果想優化的話，可以對ajax進行優化，如沒有請求完成下個請求就已出發，這時可以把ajax給abort掉，如何實現還是去看下ajax的文章吧，當然也可以加個setTimeout()延時300ms觸發ajax請求，從而減少請求次數，達到降低服務器壓力的效果。有些晚了，也比較累，第一篇就這么結束吧，表好意思。。 ![](https://box.kancloud.cn/b6cc402ee2e5bf99f8c754bc223ffd40_224x179.jpg)