title: Element UI autocomplete no results
body: <p>I use in my project <a href="https://element.eleme.io/#/en-US/component/input#autocomplete-attributes" rel="nofollow noreferrer">element UI autocomplete component</a>.</p>
  
  <p>When the input raises no result, I want to show a <em>no results</em> message.<br>
  In other projects I had it as an option in the suggest box (which is NOT selectable):</p>
  
  <p><a href="https://i.stack.imgur.com/7iYbv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7iYbv.png" alt="enter image description here"></a></p>
  
  <p>However, with element-ui autocomplete, after the searching icon disappears, the drop-down disappears as well:</p>
  
  <p><a href="https://i.stack.imgur.com/SspLZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SspLZ.png" alt="enter image description here"></a></p>
  
  <p>With this component I do not manage to do so. Any idea?</p>
  
  <p>My code looks like this:</p>
  
  <p><strong>Template:</strong></p>
  
  <pre><code>&lt;el-form ref="addressForm" :inline="true" :model="formData"&gt;
      &lt;el-form-item prop="city"&gt;
          &lt;el-autocomplete
                  class="inline-input"
                  v-model="formData.cityInput"
                  :fetch-suggestions="getCities"
                  placeholder="City"
                  :trigger-on-focus="false"
                  :clearable="true"
                  @select="handleSelectCity"
                  @clear="clearCity"
                  size="small"
          &gt;&lt;/el-autocomplete&gt;
      &lt;/el-form-item&gt;
          :
          :
      &lt;el-form-item&gt;
          &lt;el-button type="primary" @click="onSubmit" size="small"&gt;
              Search
          &lt;/el-button&gt;
      &lt;/el-form-item&gt;
  &lt;/el-form&gt;
  </code></pre>
  
  <p><strong>Script:</strong>    </p>
  
  <pre><code>export default {
      data() {
          return {
              formData: {
                  cityInput: "",
                  city: "",
                  :
                  :
              },
          }
      },
  
      methods: {
          getCities(query, callback) {
              this.clearCity();
  
              // Ajax call to obtain results for autocomplete
              axios.get(
                  "/cities", {
                      query: query
                  })
                  .then(
                      response =&gt; {
                          callback(response.data);
                      }
                  );
  
          },
  
          handleSelectCity(item) {
              this.formData.city = item.value;
          },
  
          clearCity() {
              this.formData.city = "";
          },
  
          :
          :
          :
      }
  };
  </code></pre>
  
  <p><strong>PHP code: (Laravel)</strong></p>
  
  <pre><code>public function getCities($query)
  {
      $res = DB::connection('mainDb')
          -&gt;table('offices')
          -&gt;where('city', 'like', $query . '%')
          -&gt;select('city AS value')
          -&gt;distinct()
          -&gt;get();
  
      return $res;
  }
  </code></pre>