html5のautocompleteとvue.js、選んだデータのID表示
html5のdatalistを使ったautocompleteでは、選ばれた行のID等を取得することが不可能だったので工夫して実現してみた。
<input autocomplete="on" list="member" name="searchname" type="text" v-model="searchStr" v-on:keyup="changeInput">
<datalist id="member">
<option v-for="(elem, index) in mems">@{{ elem }}</option>
</datalist>
<script type="text/javascript">
var vm = new Vue({
el: ".sample",
data: {
members: /*メンバーのデータ(id,name)*/,
mems: [],
searchedID: -1,
searchStr: '',
},
methods: {
changeInput: function(index){
let autocomp = this.searchStr ? this.members.filter(member => { return member.name.includes( this.searchStr ); } ) : [];
this.mems.splice(0);
for( val of autocomp ){
this.mems.push( val['name'] );
this.searchedID = val['id'];
};
if( this.mems.length != 1 ) this.searchedID = -1;
},
},
});
</script>
※まずmembersにはid,nameを含むデータを読み込んであります。
これはスピードアップのためです。もちろん何かの条件で絞り込んだデータを動的に読み込んでも構いません。
nameでのautocompleteをしていますが、inputに入力がされる度に動的にdatalistを作り直し、最終的に1レコードに絞り込まれた時点でのidをsearchedIDに記録させています。
入力値が最終的に見つからない場合、searchedIDは-1になるのでリストに無い値が選ばれたら分かるし、searchedIDがあればその値を使えば何が選ばれたのか知ることができる仕組みになります。