JS - 006 - 搜尋欄(Vue比較)


006

＋ 主題 - 用 javascript 做即時搜尋

github連結

+ 邏輯 - 

  1. 大量資料取出--
    取得json的資料放入空陣列中（使用fetch或是ajax）。
  2. 取得使用者輸入值--
    input的value，為了防止使用者輸入錯誤，刪掉前後空格，trim()。
  3. 比對資料--
    使用正規運算式，不區分大小寫的篩選('gi')，原陣列使用filter()篩選和正規運算式的match(相同部分)。
  4. 搜尋欄相同的部分高光--
    取得後，使用map()製作新array，繼續使用正規運算式中的replace(被取代值, 將標籤取代進去)，return。
  5. 使用.join()合併成字串回傳，才能塞入html內。
  6. 顯示在搜尋欄下--
    塞進html內，取代。


＋ JS語法筆記 -

// fetch : 
在js中，fetch可以更簡潔的取得非同步資料，then()，先讀完再then，做成一步一步的樣子。
第二個參數如果是用get可以省略，method也有post, delete...，header是跨網域不同網站之間呼叫，也可以丟資料回去data。
fetch(endpoint).then(res=>{

response：當中會有type:cors，跨網域的意思。status是指傳送是否成功，像是404、200。其中response裡面有個很重要的叫做json，可以把它轉換成物件。

fetch(endpoint).then(res=>{
// JSON.parse();無法直接用，res.json()就是promise必須用then接
res.json().then(function(obj){
console.log(obj)
});
})

//如果是使用ajax：

// 如果要使用JQ
$.ajax({
url:endpoint
}).done(function(res){
cities=JSON.parse(res);
console.log(cities);
})

// RegExp : 
正規表達式。
let regexp = new RegExp(filter,'gi')
使用gi做篩選，g是全部i是不區分大小寫。
match(regexp)
使用regexp的方法，match做篩選，完全相符的部分挑出來。
city.city.replace(regexp,`<span class="hl">${filter}</span>`);
使用regexp的方法， replace做篩選。
http://www.runoob.com/js/js-regexp.html
// toLocaleString : 可以轉換成各國的小數表達。前面必須是數值不可以是字串。


+ 實作技巧 -

監聽keyup才不用處理keydown延續觸發的問題。
善用陣列的map做新陣列，filter篩選功能。

+ Vue框架做法比較 -

// 框架很重要的是資料綁定，也就是資料改變時，畫面會自動處理
// 單向綁定，是資料動，畫面動
// 雙向綁定，是多包一層，使用者動了之後，再資料動，畫面動
// 所以現在要使用雙向綁定，input的值
new Vue({
// 作用在DOM哪個區域內，el:表element
el:".search-form",
// 這個vue要處理哪些data
data(){
return{
// 資料讀回來的cities
cities:null,
// 和使用者輸入的值
filter:''
}
},
// 當有a資料想產B資料時用計算用computed
computed:{
// 依照使用者打的字，產出一個作為篩選的條件
regexp(){
return new RegExp(this.filter,'gi');
},
// 把1000cities篩選成符合條件的新陣列
filterArray(){
return this.cities.filter(city=>city.city.match(this.regexp)||
city.state.match(this.regexp))
}
},
methods:{
highlight(city){
let cityName = city.city.replace(this.regexp,`<span class="hl">${this.filter}</span>`);
let stateName = city.state.replace(this.regexp,`<span class="hl">${this.filter}</span>`);
return cityName + ', ' + stateName;
}
},
// 把資料裝上去之後要幹嘛
mounted(){
$.ajax({url:endpoint}).done(res=> this.cities =JSON.parse(res))
}
})
// 箭頭函式都會指向同個this，箭頭函式沒有自己的this，沿用外部的this

留言

張貼留言