Vue.js에서 증분 검색
증분 검색이란?
증분 검색 (영문 : incremental search)은 응용 프로그램에서 검색 방법 중 하나입니다. 검색하고 싶은 단어를 모두 입력한 후 검색하는 것이 아니라, 입력할 때마다 즉시 후보를 표시시킨다
완제품
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>インクリメンタルサーチ</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<!-- v-model を指定する -->
<input type="text" placeholder="検索" v-model="search">
<!-- sort とソート順選択欄を v-modelで結ぶ -->
<select v-model="sort">
<option value="">ソート無し</option>
<option value="asc">昇順</option>
<option value="desc">降順</option>
</select>
<!-- v-for を使ったリストをアニメーションさせるためのコンポーネント <transition-group>key 属性を付ける必要がある -->
<transition-group tag="ul">
<!-- <li v-for="item in list"> listプロパティの値をv-forで回す -->
<!-- fileterdListを表示 -->
<li v-for="item in sortedList" v-bind:key="item.id">
{{ item.text }}
</li>
</transition-group>
</div>
<script src="main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
JS
new Vue({
el: "#app",
data:{
//入力フォームに入力された値を表すデータを定義
search: '',
//現在どの並び順でソートしているのかを表すデータ
sort: '',
//、次は検索対象のデータを定義
list: [
{ id: 1, text: 'Python' },
{ id:2, text: 'Ruby'},
{ id:3, text: 'PHP'},
{ id:4, text: 'JavaScript'},
{ id:5, text: 'Java'},
{ id:6, text: 'Go'},
{ id:7, text: 'C'},
{ id:8, text: 'C#'},
{ id: 9, text: 'Rails' },
{ id:10, text: 'Django'},
{ id:11, text: 'MySQL'},
{ id:12, text: 'Vue.jst'},
{ id:13, text: 'react'},
{ id:14, text: 'Docker'},
{ id:15, text: 'unity'},
{ id:16, text: 'jQuery'}
]
},
computed: {
//検索処理としてfileterdListを定義
filteredList: function(){
//filter のコールバック関数内では引数に配列の各項目が渡され、返り値が true となった項目のみ出力
return this.list.filter(function(item){
//ある文字列に他の文字列が含まれているかどうかを調べる時は indexOfを使用
//item.text 文字列に、this.search という文字列が含まれている時に、その文字列の場所を表す数値を返し、含まれていないときには -1 を返し
return item.text.indexOf(this.search) > -1
}, this)
},
//ソート後のデータを返す算出プロパティ sortedList
sortedList: function(){
var copy = this.filteredList.slice()
if(this.sort === 'asc' ){
//comparatorAsc メソッドをコールバックとして sort 関数に渡す
return copy.sort(this.comparatorAsc)
} else if(this.sort === 'desc') {
//降順に並べ替えるためのコールバック関数は comparatorDesc
return copy.sort(this.comparatorDesc)
} else{
return copy
}
}
},
methods:{
comparatorAsc: function(itemA, itemB){
if(itemA.text < itemB.text){
return -1
} else if(itemA > itemB.text){
return 1
} else{
return 0
}
},
comparatorDesc: function(){
if(itemA.text > itemB.text){
return -1
} else if(itemA < itemB.text){
return 1
} else{
return 0
}
},
}
});
CSS
body{
font-family: sans-serif;
}
input,
select{
padding: 2px 8px;
font-size: inherit;
vertical-align: middle;
}
ul {
position: relative;
margin-top: 6px;
padding: 0;
width: 300px;
list-style: none;
}
li{
margin: 0;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.v-move{
transition: transform 300ms ease-out;
}
.v-enter-active {
transition: 300ms;
}
.v-enter{
opacity: 0;
}
.v-enter-to{
opacity: 1;
}
.v-leave-active{
transition: 300ms;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
Reference
이 문제에 관하여(Vue.js에서 증분 검색), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ron-Qiita/items/58575eba63d04fbe672d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>インクリメンタルサーチ</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<!-- v-model を指定する -->
<input type="text" placeholder="検索" v-model="search">
<!-- sort とソート順選択欄を v-modelで結ぶ -->
<select v-model="sort">
<option value="">ソート無し</option>
<option value="asc">昇順</option>
<option value="desc">降順</option>
</select>
<!-- v-for を使ったリストをアニメーションさせるためのコンポーネント <transition-group>key 属性を付ける必要がある -->
<transition-group tag="ul">
<!-- <li v-for="item in list"> listプロパティの値をv-forで回す -->
<!-- fileterdListを表示 -->
<li v-for="item in sortedList" v-bind:key="item.id">
{{ item.text }}
</li>
</transition-group>
</div>
<script src="main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
new Vue({
el: "#app",
data:{
//入力フォームに入力された値を表すデータを定義
search: '',
//現在どの並び順でソートしているのかを表すデータ
sort: '',
//、次は検索対象のデータを定義
list: [
{ id: 1, text: 'Python' },
{ id:2, text: 'Ruby'},
{ id:3, text: 'PHP'},
{ id:4, text: 'JavaScript'},
{ id:5, text: 'Java'},
{ id:6, text: 'Go'},
{ id:7, text: 'C'},
{ id:8, text: 'C#'},
{ id: 9, text: 'Rails' },
{ id:10, text: 'Django'},
{ id:11, text: 'MySQL'},
{ id:12, text: 'Vue.jst'},
{ id:13, text: 'react'},
{ id:14, text: 'Docker'},
{ id:15, text: 'unity'},
{ id:16, text: 'jQuery'}
]
},
computed: {
//検索処理としてfileterdListを定義
filteredList: function(){
//filter のコールバック関数内では引数に配列の各項目が渡され、返り値が true となった項目のみ出力
return this.list.filter(function(item){
//ある文字列に他の文字列が含まれているかどうかを調べる時は indexOfを使用
//item.text 文字列に、this.search という文字列が含まれている時に、その文字列の場所を表す数値を返し、含まれていないときには -1 を返し
return item.text.indexOf(this.search) > -1
}, this)
},
//ソート後のデータを返す算出プロパティ sortedList
sortedList: function(){
var copy = this.filteredList.slice()
if(this.sort === 'asc' ){
//comparatorAsc メソッドをコールバックとして sort 関数に渡す
return copy.sort(this.comparatorAsc)
} else if(this.sort === 'desc') {
//降順に並べ替えるためのコールバック関数は comparatorDesc
return copy.sort(this.comparatorDesc)
} else{
return copy
}
}
},
methods:{
comparatorAsc: function(itemA, itemB){
if(itemA.text < itemB.text){
return -1
} else if(itemA > itemB.text){
return 1
} else{
return 0
}
},
comparatorDesc: function(){
if(itemA.text > itemB.text){
return -1
} else if(itemA < itemB.text){
return 1
} else{
return 0
}
},
}
});
body{
font-family: sans-serif;
}
input,
select{
padding: 2px 8px;
font-size: inherit;
vertical-align: middle;
}
ul {
position: relative;
margin-top: 6px;
padding: 0;
width: 300px;
list-style: none;
}
li{
margin: 0;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.v-move{
transition: transform 300ms ease-out;
}
.v-enter-active {
transition: 300ms;
}
.v-enter{
opacity: 0;
}
.v-enter-to{
opacity: 1;
}
.v-leave-active{
transition: 300ms;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
Reference
이 문제에 관하여(Vue.js에서 증분 검색), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ron-Qiita/items/58575eba63d04fbe672d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
