怎麼用js寫乙個類似於百度輸入框的搜尋外掛程式

2022-04-11 23:37:27 字數 1163 閱讀 7213

ps:這次做的這個小外掛程式只是在前端實現,並沒有經過資料庫。需要用到的的框架:1.bootstrap.css的樣式 2.vue.js

最終效果如下:

js部分:

$(window).click(function () );

var content_data = ,,,

,,,],

classify_new: ,//搜尋框選項

is_selected: 'n'//判斷搜尋框裡面的元素有沒有被點選

};var content_el = new vue(}}

}},

其中,blog_classify是要在input框裡面宣告的v-model屬性。當blog_classify屬性的值發生變化時,會自動呼叫watch裡面對應的方法。

我的想法:把classify_data裡面的資料全都遍歷一遍,用indexof方法判斷輸入的關鍵字是否存在於classify_data中,

如果存在就新增到classify_new中,最後在html裡面用v-for生成可選項列表在在前台展示。

前台**:

分類:v-model="blog_classify" type="text" class="form-control" id="question-classify">

v-if="blog_classify.length>0" class="list-group"

style="max-height: 100px;overflow: auto;">

v-for="statement,index in classify_new">}

前端主要是v-model和v-for這兩個屬性。v-model對blog_classify屬性進行雙向繫結,當blog_classify的值發生變化時,classify_new的陣列內容也會動態改變。v-for會根據classify_new的內容動態改變列表的長度和

內容。

不足的地方希望各位大佬交流更優化的方式。

用原生js寫出類似於ajax請求程式

myajax是乙個用js編寫的乙個跨瀏覽器的ajax庫,支援get,post,jsonp請求,精巧,簡單。原始碼 var myajax 根據url中是否出現過 來決定新增時間戳引數時使用 還是 var paramprefix url.indexof 1 url url paramprefix jso...

VC下製作乙個類似於BCB的GroupBox的控制項

如果大家用過其它一些物件導向的高階語言 如 bcb delphi vb 等 可能會用到裡面的groupbox控制項或者panel控制項,只要將其它控制項拖入這兩個控制項裡面,可以控制項一起顯示 一起隱藏等功能。vc沒有提供panel控制項,但提供了乙個groupbox控制項,而且這個控制項只是乙個簡...

乙個類似於購物車的python程式

練習中遇到的乙個練習題,隨便寫了些,有點亂,類似於乙個購物車,具體題目的要求是這樣的 輸出商品列表,使用者輸入序號,顯示使用者選中的商品 商品列表 goods 要求 1 頁面顯示 序號 商品名稱 商品 如 1 電腦 1999 2 滑鼠 10 2 使用者輸入選擇的商品序號,然後列印商品名稱及商品 3 ...