Как принудительно открыть autocomplete?

103

21 сентября 2019, 21:30

Использую Quasar Framework, конкретно проблема с компонентом Autocomplete:

new Vue({ 
  el: '#app', 
  data: function() { 
    return { 
      query: '' 
    } 
  }, 
  methods: { 
    search(val, done) { 
      setTimeout(() => { 
        return done([{ 
            label: 'Вариант 1', 
            value: 'Вариант 1' 
          }, 
          { 
            label: 'Вариант 2', 
            value: 'Вариант 2' 
          }, 
          { 
            label: 'Вариант 3', 
            value: 'Вариант 3' 
          } 
        ]); 
      }, 1000); 
    }, 
    selected(item) { 
      this.query = (item) ? item.value : ''; 
    }, 
    clickHandler() { 
      this.query = 'Тест'; 
 
      this.search(this.query, (items) => { 
        // как заставить q-autocomplete искать "Тест"? 
      }); 
    } 
  } 
})

<head> 
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css"> 
  <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"> 
  <link href="https://cdn.jsdelivr.net/npm/ionicons@^4.0.0/dist/css/ionicons.min.css" rel="stylesheet"> 
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@^2.0.0/css/materialdesignicons.min.css" rel="stylesheet"> 
  <link href="https://cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css" rel="stylesheet"> 
  <link href="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/quasar.mat.min.css" rel="stylesheet" type="text/css"> 
</head> 
 
<body> 
 
  <div id="app"> 
    <q-search v-model="query" placeholder="Поиск"> 
      <q-autocomplete @search="search" @selected="selected" /> 
    </q-search> 
    <p>Модель: {{ query }}</p> 
    <q-btn @click="clickHandler">Вставить слово "Тест" и начать поиск</q-btn> - как заставить её работать? 
  </div> 
 
  <script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/quasar.ie.polyfills.umd.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
  <script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/quasar.mat.umd.min.js"></script> 
  <script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/i18n.pt-br.umd.min.js"></script> 
  <script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/icons.fontawesome.umd.min.js"></script> 
</body>

Если начать вводить текст в поле "Поиск" - через секунду выдаст 3 результата. Но мне нужно сделать так, чтобы я не вводил "ручками" текст, а нажал на кнопку и он подставился в поле "Поиск" и начал искать эти же 3 варианта. Как это сделать?

Answer 1

Я думаю, что проблема в реактивности параметра items. Я не нашел, где он у Вас применяется, однако думаю, что если Вы поставите наблюдатель за ним (через сomputed), то все должно заработать. Примерно так:

computed:{
  newItems(){
    return this.items
  }
}

В коллбеке search, сделайте присвоение this.items = items

Answer 2

Временно удалось решить проблему добавив это:

const autocomplete = this.$refs.autocomplete;
autocomplete.results = this.items;
autocomplete.__showResults();

new Vue({ 
  el: '#app', 
  data: function() { 
    return { 
      items: [], 
      query: '' 
    } 
  }, 
  methods: { 
    search(val, done = null) { 
      this.items = [{ 
          label: 'Вариант 1', 
          value: 'Вариант 1' 
        }, 
        { 
          label: 'Вариант 2', 
          value: 'Вариант 2' 
        }, 
        { 
          label: 'Вариант 3', 
          value: 'Вариант 3' 
        } 
      ]; 
 
      setTimeout(() => { 
        if (done) done(this.items); 
        else { 
          const autocomplete = this.$refs.autocomplete; 
           
          console.log(autocomplete); 
 
          autocomplete.results = this.items; 
          autocomplete.__showResults(); 
        } 
      }, 1000); 
    }, 
    selected(item) { 
      this.query = (item) ? item.value : ''; 
    }, 
    clickHandler() { 
      this.query = 'Тест'; 
 
      this.search(this.query); 
    } 
  } 
})

<head> 
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css"> 
  <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"> 
  <link href="https://cdn.jsdelivr.net/npm/ionicons@^4.0.0/dist/css/ionicons.min.css" rel="stylesheet"> 
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@^2.0.0/css/materialdesignicons.min.css" rel="stylesheet"> 
  <link href="https://cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css" rel="stylesheet"> 
  <link href="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/quasar.mat.min.css" rel="stylesheet" type="text/css"> 
</head> 
 
<body> 
 
  <div id="app"> 
    <q-search v-model="query" placeholder="Поиск"> 
      <q-autocomplete @search="search" @selected="selected" ref="autocomplete" /> 
    </q-search> 
    <p>Модель: {{ query }}</p> 
    <q-btn @click="clickHandler">Вставить слово "Тест" и начать поиск</q-btn> - как заставить её работать? 
  </div> 
 
  <script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/quasar.ie.polyfills.umd.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
  <script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/quasar.mat.umd.min.js"></script> 
  <script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/i18n.pt-br.umd.min.js"></script> 
  <script src="https://cdn.jsdelivr.net/npm/quasar-framework@0.17.8/dist/umd/icons.fontawesome.umd.min.js"></script> 
</body>