I have a requirement where I have to suggest in the data list and when a user selects any of the datalist options, I have to update other input fields accordingly.

Here is my input field and Datalist code.

<input type="text" v-model="party.name" class="form-control form-control-sm shadow-sm" @input="searchPartyByName()" placeholder="Party name" list="queriedParties"/>

<datalist id="queriedParties">
    <option v-for="party in queriedParties">{{party.name}}</option>
</datalist>

Now, what I want is, When a user hits enter or click on specific data list option, I want to update my this input field (Which is by default with data list) but I also want to set other form fields.

I have bound other form fields with my party data object. So, Only if I can update my party data object by any event on datalist option, I will be happy! I want something like this.

<option v-for="party in queriedParties" @click="setParty(party)">{{party.name}}</option>

I already tried the above-given example but it's not working. I also tried with @change but it's not working too!

Is there any way to acplish this? I checked almost all the articles, jsfiddles and codepens available but none of them solves my issue.

I have a requirement where I have to suggest in the data list and when a user selects any of the datalist options, I have to update other input fields accordingly.

Here is my input field and Datalist code.

<input type="text" v-model="party.name" class="form-control form-control-sm shadow-sm" @input="searchPartyByName()" placeholder="Party name" list="queriedParties"/>

<datalist id="queriedParties">
    <option v-for="party in queriedParties">{{party.name}}</option>
</datalist>

Now, what I want is, When a user hits enter or click on specific data list option, I want to update my this input field (Which is by default with data list) but I also want to set other form fields.

I have bound other form fields with my party data object. So, Only if I can update my party data object by any event on datalist option, I will be happy! I want something like this.

<option v-for="party in queriedParties" @click="setParty(party)">{{party.name}}</option>

I already tried the above-given example but it's not working. I also tried with @change but it's not working too!

Is there any way to acplish this? I checked almost all the articles, jsfiddles and codepens available but none of them solves my issue.

• javascript
• jquery
• vue.js
• vuejs2
• html-datalist

3 Answers 3

datalist doesn't have events but the input does. You should do the following:

<template>
  <input type="text" v-model="party.name" .... />
  <datalist id="queriedParties">
    <option v-for="party in queriedParties">{{party.name}}</option>
  </datalist>
</template>

<script>
export default {
    watch: {
        party: {
            deep: true,
            handler (old_party, new_party) {
              if (old_party.name !== new_party.name) this.searchPartyByName(new_party.name)
            }
        }
}
</script>

It seems that your queriedParties is an array of objects. Does it work if you have just an array of strings?

For objects use something along these lines:

<template>
  <div class="sourceselection">
    <div>
      <div class="jumbotron">
        <h2><span class="glyphicon glyphicon-list-alt"></span>&nbsp;News List</h2>
        <h4>Select News Source</h4>
          <input v-model="source" list="newssources-list" v-on:input="sourceChanged" 
                 name="source-selection" id="source-selection" class="form-control" 
                 placeholder="Please specify news source ..."/>
          <datalist id="newssources-list">
            <option v-for="source in sources" v-bind:value="source.name"  v-bind:label="source.name"></option>
          </datalist>
        <div v-if="deepSource">
          <h6>{{deepSource.description}}</h6>
          <a v-bind:href="deepSource.url" class="btn btn-primary" target="_blank">Go To {{deepSource.name}} Website</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'sourceselection',
  data () {
    return {
      sources: [],
      source: '',
      deepSource: ''
    }
  },
  methods: {
    sourceChanged: function(e) {
      console.log("source = "+this.source+" new value = "+e.target.value);
      var newSource = e.target.value;
     // only action if value is different from current deepSource 
     if (newSource!= this.deepSource.name) { 
       for (var i=0; i<this.sources.length; i++) {
         if (this.sources[i].name == newSource) {
           this.deepSource = this.sources[i];
           this.source = this.deepSource.name;
         }
       }
       this.$emit('sourceChanged', this.deepSource.id);
     }
    }
  },
  created: function () {
    var api = "https://newsapi/v1/sources?language=en";
    this.axios.get(api).then((response) => {
        this.sources = response.data.sources;
    });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this ponent only -->
<style scoped>
</style>

There is no event in datalist, so you can't handle, you'd better write your own list. Here is a example open in codepen:

//pug
#app
  .form-group.has-feedback
    input.input-search.form-control(type='text', v-model='word', placeholder='Search')
    ul#list(v-if='Object.keys(filtered_projects).length > 0')
      li(v-for='(value, key) in filtered_projects', @click='gotoProjectPage(key)')
        span {{value}}
        p {{key}}
    span.glyphicon.glyphicon-search.form-control-feedback

/*css*/
body {
  margin: 10px;
}
#app {
  width: 400px;
}
#list {
  font-size: 12px;
  list-style: none;
  margin: 0;
  padding: 5px 0;
  background-color: white;
  border-radius: 0 0 5px 5px;
  border: 1px #ccc solid;
}
#list li {
  display: block;
  padding: 5px 15px;
}
#list li:hover {
  background-color: #ccc;
}
#list li span {
  font-weight: 550;
}
#list li p {
  margin: 5px 0 0;
}

//js
var app = new Vue({
  el: '#app',
  data: {
    word: '',
    projects: {"DataCenterMetro":"TEST1","IFF_Handway":"国际香料","SPH_Handway":"上药控股广东有限公司空调系统","QingTang_GZ":"广州地铁_清塘站","BTE_Handway":"白天鹅宾馆","NSSC_SZ":"深圳地铁_南山书城站","TA0301_Handway":"天安云谷二期"}
  },
  puted: {
    filtered_projects: function () {
      var vm = this, result = {};
      if (vm.word) {
        for(var key in vm.projects) {
          if(key.toLowerCase().indexOf(vm.word) != -1 || vm.projects[key].toLowerCase().indexOf(vm.word) != -1)
            result[key] = vm.projects[key];
        }
      }
      return result;
    }
  },
  created: function () {
    var vm = this;
    //TODO get projects
  },
  methods: {
    gotoProjectPage: function (key) {
      console.log('/map_login?project=' + key);
      //TODO handle
    }
  },
  });