usage

Installation

npm install mk-vue-search  

Options

{
	autoFocus:true,
	searchInput:'', // input's value
  isShow:false, //whether show search for the first time.
	showAlways:false, //show always.
  url:'', //search url,
  emptyMsg: '', // message for empty data.
  title: '', // placeholder value
  delay: 500, //delay time
  ajaxData: {}, //ajax param
  showClose: false, //show or hide 'close' button
	appendToElement:'', // Where the module is inserted
  listConfig:{
    name:'text' // map 'name' to 'text'
  },
}  

Demo

html

<mk-search ref="search" @select="onSelect" :options="{url:'https://www.google.cn'}">
      <ul slot="list">
        <li>11</li>
      </ul>
</mk-search>  

js

import Search from 'mk-vue-search' 
Vue.use(Search) 

Interface data

url

@param key //search word
@return 
{
	list:
		[{
			"text": "东文",
			...param
		}]  
}

Events

Event Name|Description|Parameters
---|---|---
select|trigger select|{list:{...param, "text": "东文"}, searchInput:'search word'} show|trigger show|{searchInput:'search word'} close|trigger close|{searchInput:'search word'} enter|trigger enter|{searchInput:'search word'}

Methods

Method|Description|Parameters
---|---|---
show|show search|''
searchData|invoke search interface|{key:'search word'}
setFocus|set input focus|''

Slot

Name|Description
---|---
list|show default content when search's input is empty.

Contributor

licuiting