title: how to create a custom autocomplete component in vue js?
body: <p>Currently i am using buefy autocomplete.But there are a few issues with it.</p>
  <p>DepartmentDetail.vue</p>
  <pre><code>&lt;template slot-scope=&quot;props&quot;&gt;
    &lt;div class=&quot;container is-fluid&quot;&gt;
      &lt;b-loading :is-full-page=&quot;true&quot; :active.sync=&quot;this.isLoading&quot;&gt;&lt;/b-loading&gt;
  &lt;b-field label=&quot;Business Unit&quot;&gt;
        &lt;b-autocomplete
          :data=&quot;dataBusinessUnit&quot;
          placeholder=&quot;select a business unit...&quot;
          field=&quot;businessUnit&quot;
          :loading=&quot;isFetching&quot;
          :value=&quot;this.objectData.businessUnit&quot;
          @typing=&quot;getAsyncDataBusinessUnit&quot;
          @select=&quot;(option) =&gt; {updateValue(option.id,'businessUnit')}&quot;
        &gt;
          &lt;template slot-scope=&quot;props&quot;&gt;
            &lt;div class=&quot;container&quot;&gt;
              &lt;p&gt;
                &lt;b&gt;ID:&lt;/b&gt;
                {{props.option.id}}
              &lt;/p&gt;
              &lt;p&gt;
                &lt;b&gt;Description:&lt;/b&gt;
                {{props.option.description}}
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/template&gt;
          &lt;template slot=&quot;empty&quot;&gt;No results found&lt;/template&gt;                
        &lt;/b-autocomplete&gt;
      &lt;/b-field&gt; 
  &lt;/div&gt;
  &lt;/template&gt;  
  </code></pre>
  <p>Function that fetches the results based on user input-</p>
  <pre><code>    getAsyncDataBusinessUnit: debounce(function(name) {
       //  console.log('getAsyncDataBusinessUnit you typed'+name);
        if (!name.length) {
          this.dataBusinessUnit = [];
          return;
        }
        this.isFetching = true;
        api
          .getSearchData(this.sessionData.key,`/businessunit/${name}`)
          .then(response =&gt; {
            this.dataBusinessUnit = [];
            response.forEach(item =&gt; {
              this.dataBusinessUnit.push(item);
            });
          })
          .catch(error =&gt; {
            this.dataBusinessUnit = [];
            throw error;
          })
          .finally(() =&gt; {
            this.isFetching = false;
          });
      }, 500), 
  
  </code></pre>
  <p>So instead of using the buefy's b-autocomplete i want to create and use my own autocomplete component.
  So i went ahead and created my own autocomplete component and called it from the DepartmentDetail vue page like this-</p>
  <p>DepartmentDetail.vue</p>
  <pre><code>&lt;b-field label=&quot;Custom Business Unit &quot;&gt;
      &lt;AutoComplete :method=&quot;getAsyncDataBusinessUnit&quot; title='businessUnit'   :autocompleteData=&quot;dataBusinessUnit&quot; viewname='DepartmentDetail'&gt;
        &lt;/AutoComplete&gt;
  &lt;/b-field&gt;
  </code></pre>
  <p>AutoComplete.vue</p>
  <pre><code>&lt;template&gt;
  
    &lt;div class=&quot;autocomplete&quot;&gt;
      &lt;input style=&quot;font-size: 12pt; height: 36px; width:1800px; &quot; type=&quot;text&quot;    v-model=&quot;this.objectData[this.title]&quot; @input=&quot;getAsyncDataBusinessUnit&quot;/&gt;
  &lt;ul v-show=&quot;isFetching&quot; &gt;
        &lt;li v-for=&quot;(dataBusinessUnit, i) in dataBusinessUnit&quot; :key=&quot;i&quot; @click=&quot;setResult(dataBusinessUnit)&quot; &gt;
           &lt;!-- {{ autocompleteData }} --&gt;
            &lt;template v-if=&quot;title!='manager'&quot;&gt;
            &lt;div class=&quot;container&quot;&gt;
              &lt;p&gt;
                &lt;b&gt;ID:&lt;/b&gt;
                {{dataBusinessUnit.id}}
              &lt;/p&gt;
              &lt;p&gt;
                &lt;b&gt;Description:&lt;/b&gt;
                {{dataBusinessUnit.description}}
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/template&gt;
           &lt;template v-else&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;p&gt;
                &lt;b&gt;ID:&lt;/b&gt;
                {{dataBusinessUnit.id}}
              &lt;/p&gt;
              &lt;p&gt;
                &lt;b&gt;First Name:&lt;/b&gt;
                {{dataBusinessUnit.firstName}}
              &lt;/p&gt;
              &lt;p&gt;
                &lt;b&gt;Last Name:&lt;/b&gt;
                {{dataBusinessUnit.lastName}}
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/template&gt;
             &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  import { viewMixin } from &quot;../viewMixin.js&quot;;
  import schemaData from '../store/schema';
  import debounce from &quot;lodash/debounce&quot;;
  import api from &quot;../store/api&quot;;
  const ViewName = &quot;AutoComplete&quot;;
  var passedview;
  
  export default {
    name: &quot;AutoComplete&quot;,
     props: {
      method: { 
          type: Function 
          },
          title: String,
          viewname:String,
          autocompleteData: {
         type: Array,
         required: true
      }
    },
    
  
     data() {
      return {
    //   results: [],
        dataBusinessUnit: [],
        isFetching: false
       // vignesh: this.objectData[this.title]
      };
    }, 
    computed: {
              viewData() {
                  return this.$store.getters.getViewData('DepartmentDetail')
              },
              objectData() {             
                    return this.$store.getters.getApiData(this.viewData.api_id).data
              },
              sessionData() {
                  return this.$store.getters.getSessionData()
              },
              isLoading() {
                  return this.$store.getters.getApiData(this.viewData.api_id).isLoading
              },
              newRecord() {
                  return this.$route.params.id === null;
              },
              getTitle() {
                return this.title
              }            
    }, 
      mounted() {
       
        
    },
      methods: {
         setResult(result) {
        
            this.updateValue(result.id,this.title);
          //  localStorage.setItem(this.title,result.id );        
           this.isFetching = false;
        },  
          updateValue(newValue, fieldName) {
                  var val;
  
                  var schema = schemaData[this.viewData.schema];
                 
  
                  if(typeof schema!=='undefined' &amp;&amp; schema['properties'][fieldName]['type'] == 'date'){
                      val = this.formatDate(newValue);
                  } else {
                      val = newValue;
                  }
                  
                  this.$store.dispatch('updateDataObjectField', {
                      key: this.viewData.api_id,
                      field: fieldName,
                      value: val
                  });
              },
              
   getAsyncDataBusinessUnit: debounce(function(name) {
               
         console.log('getAsyncDataBusinessUnit you typed'+name.target.value);
        if (!name.target.value.length) {
          this.dataBusinessUnit = [];
          this.isFetching = false;
          return;
        }
     //   this.isFetching = true;
        
  
        api
          .getSearchData(this.sessionData.key,`/businessunit/${name.target.value}`)
          .then(response =&gt; {
            this.dataBusinessUnit = [];
            if (!response.length)
            {
              console.log('inside if')
            this.isFetching = false;
            }
  
            else{
              console.log('inside else')
              response.forEach(item =&gt; {
              this.dataBusinessUnit.push(item);
            });
            this.isFetching = true;
            }
           
            console.log('length of dataBusinessUnit is '+(this.dataBusinessUnit).length)
            console.log('contents of dataBusinessUnit array '+JSON.stringify(this.dataBusinessUnit))
          })
          .catch(error =&gt; {
            this.dataBusinessUnit = [];
            throw error;
          })
          .finally(() =&gt; {
           // this.isFetching = true;
          });
  
      }, 500), 
        
      },
      
      components: {
      
  
      }
  
  };
  &lt;/script&gt;
  </code></pre>
  <p>The issue iam facing is whenever i start to type anything into the Custom Business Unit input field, then immediately after 1-2 seconds the value gets reset(with the value coming from the store getters ).This however does not happen if i remove the line this.dataBusinessUnit = []; in the getAsyncDataBusinessUnit function . Why is this happening? I even tried using :input instead of v-model for the input field , but i am still facing the same issue.And also second issue is when i click an existing record under DepartmentDetail page, the value that should be set  for the custom business unit input field coming from the store getters (this.objectData.businessUnit) is not showing up sometimes? please help</p>