js實現搜尋顯示列表

2021-10-21 14:33:17 字數 1826 閱讀 2552

現有這一需求,有一列表,乙個搜尋框,要求列表根據搜尋框內容顯示,效果如下

**如下

實現思路:

父元件是搜尋框 傳給子元件列表 需要顯示的內容

子元件遍歷列表 通過computed 計算屬性來拿到處理後的資料

用到的方法有str.tolowercase()轉化為小寫,indexof()根據字串判斷拿到索引,有索引返回索引,沒有返回-1

="eub-wrap"

>

<

!-- 最下面三條資訊 --

>

="eub-msg"

>

"dianji(index)" v-

for=

"(item, index) in selectcoins"

:key=

"index"

class

="eub-con1"

>

="eub-con1-left"

>

="eub-con1-left-icon2"

>

"item.icon" alt=""/

>

<

/div>

="eub-con1-left-con2"

>

="eth"

>

}<

/div>

="ether"

>

}<

/div>

<

/div>

<

/div>

<

/div>

<

/div>

<

/div>

<

/template>

import

ethfrom

'@/assets/img/icon-eth.png'

import

usdt

from

'@/assets/img/icon-usdt.png'

import

wbtc

from

'@/assets/img/icon-wbtc.png'

import

unifrom

'@/assets/img/uni.png'

import

htfrom

'@/assets/img/ht.png'

import

hfil

from

'@/assets/img/hfil.png'

import

husd

from

'@/assets/img/husd.png'

import depositmask from

'./deposit-mask'

export

default

, props:

['searchtxt'],

computed:)}

},data()

, swapdepositustd:

, swapdepositwbtc:

, coins:[,

,,,,

,]}}

, methods:}}

<

/script>

js 實現列表搜尋使用者匹配功能

前言 在專案開發過程中,遇到乙個需求,有乙個使用者列表,前端需要對使用者列表的值進行搜尋,並將搜尋匹配成功的值顯示出來 在使用者列表上方的使用者進行輸入,顯示相應的值,這是搜尋後的,注意,我在進行搜匹配的時候沒有區分大小寫 search calval console.log this.matchin...

vue elemeent顯示下拉列表的搜尋功能

實現的效果大致如上 在element的官方文件中有詳細的解釋 首先設定可被搜尋,其次再定義搜尋方法,這個兩個文章都有介紹,但是我個人感覺用filter method方法太麻煩 可以用我之前發過的乙個方法 value placeholder 請選擇 style width 140px filterab...

79 單詞搜尋(JS實現)

這道題的思路主要還是考察深度優先遍歷 回溯,主要思路就是遍歷二維陣列每個元素,當發現元素和目標單詞的首字母相同時,就進入遞迴,沿該元素的四個方向進行依次查詢,用乙個雜湊表標記已經訪問過的位置,在遞迴過程中,若找到則返回true,若未找到,則遞迴回來時,要重置雜湊表狀態 param board par...