通过js对已加载列表进行自动搜索

àì夳堔傛蜴生んèń 2022-01-27 01:19 190阅读 0赞

**一、 实际项目中，在列表搜索展现过程中通常采用两种方法实现：**

**1)每次点击搜索调用后台接口，实时展现列表内容**

优点：列表内容过多时，可以单独调用接口返回需要的数据

缺点：每次搜索调用接口，数据交互太频繁且需要一定响应时间

**2)初始加载列表所有内容，通过前端js搜索需要的内容**

优点：一次加载，后面筛选不用从数据库取数据，减少交互

缺点：初始加载内容过多时，需要较长的响应时间

项目中列表加载内容不是很多，所以采用第二种方式：

**1)列表和搜索页面元素**

<div class="m-content" id="js-content">//基于该id，焦点定位后填充列表内容  
            <div style="display:inline;white-space: nowrap;" id="bread" class="inbox-header">  
                                  
                                  
            </div>  
              
            <div style="padding-top:20px" id="js-search">  
                <input type="text" id="js-maidianId" class="form-control\_text"  
                style="text-align: center; width: 105px" placeholder="请输入埋点名称"/>  
            </div>

**2)实时搜索js**

** 3)搜索效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MV9jc2Ru_size_16_color_FFFFFF_t_70]: /images/20220127/5c0c3bbe7f844f06a16991adc7cd2b9e.png