vue实现实时搜索(边搜索边显示)

本文转载自https://blog.csdn.net/weixin_43868692/article/details/85274392
原创作者:纵马上传剑自提

• vue.config.js (手动创建)
• router/index.js
• main.js
• test.vue

准备:
vue create 项目名
cd 项目名
npm install --save vue-router
npm install --save–dev less-loader less
npm run serve
npm install px2rem-loader --save-dev
npm install axios
npm install postcss-px2rem --save
复制代码
保存
npm run serve
地址栏:http://localhost:8000/?#/test

vue.config.js

const path = require("path");
const resolve = dir => {  
return path.join(__dirname, dir);
};
module.exports = {  
publicPath: "./",  
configureWebpack: {    
	externals: {      
		AMap: "AMap" // 高德地图配置    
	}  
	},  
// publicPath: process.env.NODE_ENV === 'production'  // ? '/production-sub-path/'  // : '/'  css: {    
	loaderOptions: {     
	 css: {},     
	postcss: {    
	//导入插件: npm install postcss-px2rem --save    
		plugins: [          
			require("postcss-px2rem")({            
				remUnit: 37.5         
		 })       
 		 ]      
 	 }    
     }  
  },  
  chainWebpack: config => {   
  //别名配置
   config.resolve.alias      
	   .set("@", resolve("src"))      
	   .set("@assets", resolve("src/assets"))      
	   .set("@components", resolve("src/components"));  
}, 
 devServer: {    
	  port: 8000,    
	  //搜索接口设置
	  proxy: {      
		  "/api": {       
		   target: "https://www.s.cn/",        
		   changeOrigin: true,       
		    pathRewrite: {          
		    "^/api": ""        
		    }     
		 }   
	    } 
       }
 };

router/index.js

import Vue from "vue";
//导入路由npm install --save vue-router
import Router from "vue-router";
//导入跳转页面
import test from "../view/search/test";
export default new Router({ 
 routes: [
       {      
	  path: "/test",      
	  name: "test",      
	  component: test    
	  }
 ]
});

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
// 导入移动端适配:npm install lib-flexible --save
import "lib-flexible";
Vue.config.productionTip = false;
new Vue({  
	   render: h => h(App), 
	   router
	   }).$mount("#app");

view/search/test.vue

<template>  
<div id="search">    
	<input type="text" class="search" placeholder="搜索" v-model.trim="value" />    
	<ul v-for="(item,i) in listArr" :key="item.Id" class="item">      
		<li>{{ item.p }}</li>    
	</ul>  
</div>
</template>
<script>
import axios from "axios"; //引入axios
// 节流函数
const delay = (function() {  
	let timer = 0;  
	return function(callback, ms) {    
		clearTimeout(timer);    
		timer = setTimeout(callback, ms);  
	};
})();
export default {  
	name: "search", 
	data() {    
		 return {      
			 value: "",      
			 listArr: []    
		 }; 
	  }, 	
	watch: {    
		 value() {      
			 delay(() => {        
			 	this.fetchData();     
			  }, 300);    
		}  
	  },  
	 methods: {    
	  	async fetchData(val) {      
		    axios.get("api/search-association.html?name=" + this.value).then(data => {   
		          console.log(data.data);      			                         
			  this.listArr = data.data;     
	           });   
	    } 
	 }, 
	mounted() {
	}
};
</script><style lang='less' scoped></style>

效果图: