Negatively Proportional Model

    vue2-typeahead

    1.3.1 • Public • Published

    vue2-typeahead

    typeahead for vue2
    Based onhttps://github.com/pespantelis/vue-typeahead

    .github/workflows/npm.yml

    Quick preview

    demo Demo

    Run demo

    # install dependencies 
    npm install
     
    # serve with hot reload at localhost:8080 
    npm run dev
     

    Warning

    Prepared rewrite by vue2.5 and bootstrap 4

    How to use

    1. Please install axios
    2. It base on bootstrap css
    3. npm install vue2-typeahead --save
    4. import and use it import TypeAhead from 'vue2-typeahead' or import TypeAhead from 'vue2-typeahead/src/components/TypeAhead.vue'
    5. config (you can get a config sample from Demo.vue)

    Sample

     <TypeAhead
          src="/static/data.json?keyword=:keyword"
          :getResponse="getResponse"
        ></TypeAhead>
    
    
    methods: {
          getResponse: function (response) {
            return response.data.items
          }
        }
    

    Config props

    v-model

    You can get the result by set v-model="" attribute

    Necessary

    1. src: The api url for get the data
    2. getResponse: The function to get a array form response

    Optional

    1. selectFirst default:false auto select first item
    2. queryParamName default::keyword this will be replace to what you input in ajax request
    3. limit default:9999 how many items will show in the list
    4. minChars default:2 only words length large than this number can emit the request
    5. delayTime default:500 delay time for emit the request for avoiding request when inputing
    6. placeholder default:null placeholder
    7. classes default:null the class you want add to input component
    8. onHit default:Function how to use the things you hit
    9. highlighting default:Function highlighting every item
    10. render default:Function to render the lists which will be show
    11. fetch default:Function how to send the url

    other

    other attribute will bind on <input /> like disabled on v1.3.0

    What you can get in instance

    Some function will return vue object, it is the instance of component and i use it to change the query, you can also get some useful data by it

    1. items: option list after render function
    2. current: current id is select or cursor is hover
    3. data: the response data of fetch

    A Complete Config Sample

    <TypeAhead
          v-model="data"
          :classes="classes"
          :placeholder="placeholder"
          src="/static/data.json?keyword=:keyword"
          :getResponse="getResponse"
          :selectFirst="selectFirst"
          :limit="parseInt(limit)"
          :queryParamName="queryParamName"
          :minChars="parseInt(minChars)"
          :delayTime="parseInt(delayTime)"
          :onHit="onHit"
          :highlighting="highlighting"
          :render="render"
          :fetch="fetch"
        ></TypeAhead>
    
        data () {
          return {
            data: '',
            selectFirst: false,
            limit: 9999,
            queryParamName: ':keyword',
            minChars: 2,
            delayTime: 500,
            placeholder: 'Please input something',
            classes: 'typeahead'
          }
        },
        methods: {
          getResponse: function (response) {
            return response.data.data.items
          },
          onHit: function (item, vue, index) {
            vue.query = item
          },
          highlighting: function (item, vue) {
            return item.toString().replace(vue.query, `<b>${vue.query}</b>`)
          },
          render: function (items, vue) {
            // 将搜索内容作为list的第一个
            let newItem = [vue.query, ...items]
            return newItem
          },
          fetch: function (url) {
            return axios.get(url)
          }
        },
        components: {
          TypeAhead
        }
    

    License

    vue2-typeahead is released under the MIT License. See the bundled LICENSE file for details.

    Install

    npm i vue2-typeahead

    DownloadsWeekly Downloads

    488

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    886 kB

    Total Files

    18

    Last publish

    Collaborators

    • mizuka