Vue2 wj-auto-complete implementation breaks search

Vue2 wj-auto-complete implementation breaks search

Posted by: cvalentin on 9 December 2020, 3:52 pm EST

• 

  cvalentin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 December 2020, 3:52 pm EST

  Hello,

  I’m a wijmo beginner and I’m having an issue with the AutoComplete control. Essentially what im trying to accomplish is to format the display of the control with custom html for display purposes only. Im running into an issue where using the itemFormatter property is breaking the search. I was able to replicate the issue in the Vue version of the demo, see below.

  –this is the initial page i used to test
  
  https://www.grapecity.com/wijmo/demos/Input/AutoComplete/Searching/Styling/vue

  –this is the updated code in the app.vue section. Please type united in the searchbox and notice how the auto complete is broken… what am i missing?

  <template>
      <div class="container-fluid">
          <div class="form-group">
              <label for="theAutoComplete">AutoComplete:</label>
              <wj-auto-complete id="theAutoComplete"
                  :itemsSource="data" :itemFormatter="itemFormat" :headerPath="'country'"
                  :searchMemberPath="'country'" :isContentHtml="true">
              </wj-auto-complete>
          </div>
      </div>
  </template>
  
  <script>
      import 'bootstrap.css';
      import '@grapecity/wijmo.styles/wijmo.css';
      import Vue from 'vue';
      import '@grapecity/wijmo.vue2.core';
      import '@grapecity/wijmo.vue2.input';
      import { getData } from './data';
  
      let App = Vue.extend({
          name: 'app',
          data: function () {
              return {
                  data: getData()
              }
          },
          methods:{
              itemFormat: function(idx, content){
                  content = "<h3><b>" + this.$data.data[idx].country + "</b></h3>"
                  return content;
              }
          }
      })
  
      new Vue({ render: h => h(App) }).$mount('#app');
  </script>
  
  <style>
      .wj-state-match {
          border: 1px solid #DFB8B7;
          border-radius: .25em;
          background: #DFB8B7;
      }
  
      label {
          margin-right: 3px;
      }
  </style>
  
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 10 December 2020, 5:51 am EST

  Hi Carlos,

  Instead of using itemFormatter, you can wj-item-template component and customize the items directly using the vue template. Update the above demo sample like this:

  <wj-auto-complete id="theAutoComplete"  :displayMemberPath="'country'" :itemsSource="data">
  	<wj-item-template v-slot="ctx">
  		<h3><b>{{ctx.item.country}}</b></h3>
  	</wj-item-template>
  </wj-auto-complete>
  

  Regards,
  
  Ashwin

• 

  cvalentin

  • Post Options:
  • Link
    Copy

  Posted 10 December 2020, 10:39 am EST

  Hi Ashwin,

  Thank you for you reply! However now the .wj-state-match class is now broken so when you see the matches the class is not applying, how do we fix that? This is the updated code with your change, thank you

  <template>
      <div class="container-fluid">
          <div class="form-group">
              <label for="theAutoComplete">AutoComplete:</label>
              <wj-auto-complete id="theAutoComplete"  :displayMemberPath="'country'" :itemsSource="data">
                  <wj-item-template v-slot="ctx">
                      <h3><b>{{ctx.item.country}}</b></h3>
                  </wj-item-template>
              </wj-auto-complete>
          </div>
      </div>
  </template>
  
  <script>
      import 'bootstrap.css';
      import '@grapecity/wijmo.styles/wijmo.css';
      import Vue from 'vue';
      import '@grapecity/wijmo.vue2.core';
      import '@grapecity/wijmo.vue2.input';
      import { getData } from './data';
  
      let App = Vue.extend({
          name: 'app',
          data: function () {
              return {
                  data: getData()
              }
          }
      })
  
      new Vue({ render: h => h(App) }).$mount('#app');
  </script>
  
  <style>
      .wj-state-match {
          border: 1px solid #DFB8B7;
          border-radius: .25em;
          background: #DFB8B7;
      }
  
      label {
          margin-right: 3px;
      }
  </style>
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 16 December 2020, 6:13 am EST

  Hi Carlos,

  The issue in your sample was arising because you were using the “idx” param to get the data item from the original data source whereas “idx” params refer to the item index from the search results collection. Please refer to the following sample which demonstrates how we could achieve the required functionality and let us know if you face any issues:
  
  https://codesandbox.io/s/wijmo-vue-forked-2mumr?file=/src/components/HelloWorld.vue

  Regards