Question

我编写的代码所有名称都来自Google API。现在我想使用JavaScript / jQuery实现搜索功能。我该如何实现搜索功能？这应该看下面的图像

<div id="createGrp" name="Create Label" style="display:none"> 
                <table> <tr>
                        <td>
                            <b>Label Name: </b>
                        </td>
                        <td><input type="text" maxlength="25" id="lname" name="labelname" onkeyup="return limitText(this, 25), CheckLimit(this, 25, 'vlenName')"/><br></td>
                        <td id="vlenName">
                            <i> 25 Characters left </i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </td>  
                        <td>
                            <input type='text' id='gleSearchCamp' name='gleSearchCamp' placeholder="Search for campaigns"/>
                            <input type='button' id='entersearch' value='Search' onclick="gleSearch('gleSearchCamp')"/>
                        </td>
                    </tr>                
                </table>
                <br/>
                <table align="left">    <tr> <td>
                            <input type="button" id="lblsave" value="Save"/> 
                            <input type="button" VALUE="Cancel" onclick="hide('createGrp')"/>      
                        </td> </tr>
                </table>            
                <br/><br/> <br/>            
                <table> <tr> 
                        <td><div class="selcheckBox" id="cmplist" name="Select Campaigns">
                                <table style="overflow-y:scroll" >
                                    <thead>
                                        <tr>
                                            <th><span class="selectALLWrap"> <input type='checkbox'  id='selectALL' onClick="selectAll(this)"></span><span>Select</span> &nbsp;&nbsp;</th>
                                            <th class="sortable" id='accountName' align="left" onclick='sortingValues(this);'>Campaign Name</th> 
                                        </tr>                                         
                                    </thead>
                                    <tbody style="font-size: 18px;font-family: 'HelveticaNeue-Medium';">
                                        <s:forEach items="${campaignDetails}" var="campDetails" >
                                            <tr>
                                                <td><div class=" "><input type="checkbox" id="campDetails.campaignId" name="campaignName" value="campDetails.campaignName"/> </div></td>
                                                <td>${campDetails.campaignName}</td>
                                            </tr>
                                        </s:forEach>
                                    </tbody>
                                </table>  

                            </div>

                        </td> </tr> </table>
                <br/><br/>                               


            </div>`enter code here`

Answer 1

我对您的问题没有足够的背景，所以我将从一些假设开始，如果我的任何假设不准确，请纠正我，然后我将能够进一步帮助您。

假设

您只有少量数据（最多 100 项）
您想要一个简单的关键字匹配搜索（而不是模糊/语义搜索）
您希望解决方案位于客户端

在这种情况下，我会使用以下基于 javascript 的解决方案

首先，我简化了您的 html 代码以提高可读性并添加了一些虚拟数据。请注意，我添加了一个 html 属性来搜索输入元素 onkeyup="gleSearch()"。这意味着只要您在搜索框中键入任何字母，就会调用 gleSearch() 方法。我们将在此方法中实现搜索功能。

<input onkeyup="gleSearch()" type='text' id='gleSearchCamp' name='gleSearchCamp' placeholder="Search for campaigns" />


<ul id="item-list" class="items-list">
  <li id="campaign1" class="item">Foot wear</li>
  <li id="campaign2" class="item">Bags</li>
  <li id="campaign3" class="item">Watch</li>
  <li id="campaign3" class="item">Shoes</li>
</ul>

这就是 gleSearch() 方法读取搜索查询，从 html 获取数据，然后隐藏与查询不匹配的项目的方式

<script>
function gleSearch() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('gleSearchCamp');
  filter = input.value.toUpperCase();
  ul = document.getElementById("item-list");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

这是working demo

如何实现搜索

1 个答案: