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)