Is it possible to pass an Array into a callback function in element-ui's el-autocomplete component?

I attempted to utilize the el-autocomplete tag in its simplest form: using an Array returned by a callback function (JSFiddle version). 

Vue.component('button-counter', {
  data: function() {
    return {
      selectdusers: [],
      user: ''
    }
  },
  template: '<el-container>        <el-container style="margin-left: 15px; width: 150px">            <el-autocomplete                class="inline-input"                v-model="user"                :fetch-suggestions="filterUsers"                placeholder="add user"                @select="handleSelect"            ></el-autocomplete>            <el-button type="info" icon="el-icon-plus" click="addUser(user)">Add</el-button>        </el-container>    </el-container>',
  methods: {
    addUser(user) {
      this.selectedUsers.push(user)
      this.user = ''
    },
    filterUsers(user, cb) {
      console.log(user)
      cb(['qqq', 'zzz'])
      //return this.allusers.filter(x => _.includes(x.f+x.t, user))
    },
    handleSelect() {}
  },
})

new Vue({
  el: '#components-demo'
})
@import url("//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d181118101813095008143d4f53495345">[email protected]</a>/lib/theme-chalk/index.css");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.7/index.js"></script>
<div id="components-demo">
  <button-counter></button-counter>
</div>

The autocomplete box appears empty visually, even though DevTools display the expected elements in 

<ElAutocompleteSuggestions>
→ data → suggestions

javascriptvue.jsvue-componentelement-ui

Answer №1

To opt for an Array instead of an Object, simply utilize the slot feature within the autocomplete block

<el-autocomplete ...>
  <template slot-scope="{ item }">
    <div class="item">{{ item }}</div>
  </template>
</el-autocomplete>

Answer №2

In order for the callback function to work properly, it requires an Object that includes a specific property named value. This particular property contains the information displayed as the suggested value.

Take this example into consideration:

filterUsers(user, cb) {
      console.log(user)
      cb([{'value': 'qqq', 'whatever': 'djhjfh'}, {'value': 'zzz', 'whatever': 'uiuiiu'}])
    },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Restrict the option to select checkboxes

Can anyone help with limiting checkbox selection? This is the code I currently have... foreach($res as $res) echo '<div class="ediv"><input type="checkbox" class="echeck" name="pr[]" value="'.trim($res['product']).'" ...

javascriptphpjquery

Having trouble passing parameters to the Mongo find collection operation

I'm having trouble with my code where req.params only gets a value after db.collection.find is executed. Can someone help me figure out what I'm doing wrong? exports.findAll = function(req, res) { var postal = parseInt(req.params.postal); ...

javascriptnode.jsmongodbnode-mongodb-native

Identifying activity on a handheld device

I am currently working on a website and I have noticed that it doesn't work as well on mobile devices as it does on desktop. There are performance issues that need to be addressed. I've seen other websites redirecting users to a different page wh ...

javascripthtmlcssmobile

Exploring the contrast between router.pathname and router.route within Next.js

Essentially, my goal is to utilize the NextJS router to access the page url by doing the following: import { useRouter } from "next/router"; const SomeComp = props => { const router = useRouter(); } Yet, when I console.log() the propertie ...

javascriptreactjsnext.js

Choosing an item using the mouse - Three.js

I have a question that I need help with. I'm trying to change the color of an object when it's selected with the mouse, but the code I wrote doesn't seem to be working correctly. Here's what I have so far: <script> v ...

javascriptthree.jsmouseclick-event

Validation scheme for the <speak> element

When using validators in an angular formarray for input fields, I encountered a challenge with the regex to check the <speak> tag. https://i.sstatic.net/ogFA3.png The content provided was considered valid. https://i.sstatic.net/ar5FJ.png An error ...

javascriptangularregex

Elements recognized worldwide, Typescript, and a glitch specific to Safari?

Consider a scenario where you have a select element structured like this: <select id="Stooge" name="Stooge"> <option value="0">Moe</option> <option value="1">Larry</option> <option value="2">Curly</option ...

javascripthtmldomsafaritypescript

Arranging the columns of a matrix

My dilemma involves a matrix (or multidimensional array) filled with non-unique values, similar to this example: var matrix = [ [1, 3, 2, 4, 1], [2, 4, 1, 3, 2], [4, 3, 2, 1, 4] ] I am in need ...

javascriptsortingmatrixlodash

Vue JS sorting elements and reverting back to their original state

Within my Vue application, I have a list of results that I want to sort alphabetically after performing a search. However, I also need the ability to revert back to the original order, which is based on relevancy in my case. The 'relevancy' orde ...

vue.js

Using ng-repeat and selectize in AngularJS to populate a multi-select drop-down with values and set selected values

In this instance, I was able to achieve pure HTML select multiple functionality by using this example (JS Bin of pure html select tag). However, instead of sticking to just the pure HTML approach, I opted to use the Selectize plugin. The confusion arose w ...

javascripthtmlangularjsselectize.jsmultiple-select

Is it possible to organize words with HTML elements utilizing JavaScript?

Code is not properly sorting the elements var element='<p><strike>Mango</strike></p>/n<p><em>Orange</em></p>/n<h1>Apple</h1>/n<p><strong>banana</strong></p>/n<p& ...

javascriptjquery

Eliminate jQuery's delayed blinking effect with the use of an event

Utilizing the mouseenter and mouseleave events, I have implemented a functionality to add a button (not actually a button) to an <li>. However, there seems to be a problem with my code. The button appears and disappears on mouseleave and mouseenter, ...

javascriptjqueryhtmlcss

What is the top frontend framework and which one seamlessly integrates with various backend frameworks?

When it comes to frontend frameworks, JavaScript acknowledges three major players: React, Angular, and Vue.js. Each of these frameworks offers ease of understanding, learning, and implementation. Now the question arises - which one is most compatible wit ...

vue.js

What is the best way to eliminate a specific character from the key of an array of objects using JavaScript?

My JavaScript object looks like this: result = [ {"Account_ID__r.Name":"Yahoo Inc Taiwan","Contact_ID__r.Email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42283427302c2d2e2602362a27313 ...

javascriptarraysjsonjavascript-objects

Steps to store radio button selections in local storage

I have a quiz that includes radio buttons, and I need to save the answers on my local storage. However, I am currently stuck and unsure of what else to do. I am learning, so please don't be too hard on me. Thank you! Here is the code I have written s ...

javascriptjsonlocal-storage

Why does `window.location.reload()` only refresh the home page and not the other pages when using Angular?

After transitioning from the home page to the menu page, I expect the menu page to refresh automatically once. However, when implementing the code below, the home page is refreshed first before navigating to the menu page without an auto-refresh. 1)Initia ...

javascriptangularroutesgoogle-chrome-devtoolsrefresh

Replace the default focus state using CSS or resetting it to a custom style

I'm looking for a solution similar to a CSS reset, but specifically for the :focus state. If such a thing doesn't exist yet, I'm interested in learning about the possible properties that can be reset or overridden in order to create a new :f ...

javascripthtmlcssfocus

Using a React component to send data through a POST request to an API

When attempting to send a selected value from a Dropdown to an API using a POST request, I keep encountering a 405 (Method Not Allowed) error. Despite trying different ways to handle the onChange event, such as: onChange{(e) => this.onChangeHandler(e.t ...

javascriptreactjs

What is the purpose of housing frontend frameworks on NPM?

As I explore various github projects and tutorials, I often come across frontend frameworks listed as dependencies in the package.json file. This confuses me. I always thought Node.js was primarily for backend development. My understanding is that frontend ...

javascriptnode.jsnpm

Exploring alternative methods of iterating over the values in a key-value pair within an AngularJS framework

My key-value pair consists of a long list of file names stored in the variable $ctrl.displayData- 143:"/this/is/a/very/long/fil22↵/this/is/a/very/long/file/path.php↵anotherone.php↵newfilel123.php" When I use ng-repeat to display these file names, t ...

javascriptangularjsangularjs-ng-repeat