求助：如何为现有模态框内的数据库列表实现搜索筛选功能？

问题分析 #

你的代码存在几个关键问题导致筛选功能失效：

• ID重复：模态框<div>和搜索输入框<input>都使用了SearchList作为ID，JS获取输入框时会拿到模态框元素，而非输入框
• 元素匹配错误：JS代码试图获取<li>内的<a>标签，但PHP生成的<li>里并没有<a>，导致无法读取文本内容
• PHP语法错误：echo <li>$infoRow->tire_id</li>;缺少引号，会导致代码执行报错
• 列表结构破坏：<ul>内插入<br>标签不符合HTML规范，会干扰列表元素的获取

修正后的完整代码 #

HTML与PHP部分

<!-- MODAL SEARCH LIST -->
<div class="modal fade" id="SearchModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
          </button>
          <h4 class="modal-title">
            <img src="./includes/themes/img/tirematicslogo.png" width="150"  alt="SmartAdmin">
          </h4>  
      </div>
      <div class="modal-body no-padding">
        <fieldset>
          <section>
            <div class="row">
              <label class="label col col-3">Serial Number:<span style="color: red;">*</span></label>
              <div class="col col-9">
                <label class="input">
                <i class="icon-append fas fa-external-link-alt"></i>
                <input type="text" id="SearchInput" onkeyup="myFunction()" placeholder="Search for serial numbers.." title="Type in a serial number">
                <ul id="myUL">
                  <?php
                      $qryBrand = tep_query( "SELECT * FROM nano_tire WHERE fleet_id='0' AND tire_status='1' AND tire_data= 'In Stock'" );
                   while ( $infoRow = tep_fetch_object( $qryBrand ) ) {
                        echo "<li>{$infoRow->tire_id}</li>";
                      }
                      ?>
                </ul>
                </label>
              </div>
            </div>
          </section>
          <div id="SearchResult"></div>
        </fieldset>
        <footer>
          <input type="hidden" value="" id="Searchtire" name="Searchtire">
          <input type="hidden" value="" id="Searchaxle" name="Searchaxle">
          <input type="hidden" value="<?=$_POST['id']?>" id="Searchfleetid" name="Searchfleetid">
          <input type="hidden" value="" id="Searchtirenum" name="Searchtirenum">
          <button type="submit" name="" class="btn btn-primary" onclick="openSearch()">Done</button>
          <button type="" class="btn btn-default" onclick="cancelsearchtire()">Cancel</button>
        </footer>
      </div>
    </div>
    <!-- /.modal-content --> 
  </div>
  <!-- /.modal-dialog --> 
</div>

JavaScript部分

<script>
function myFunction() {
    var input, filter, ul, li, i, txtValue;
    input = document.getElementById("SearchInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        txtValue = li[i].textContent || li[i].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>

修改说明 #

1. 修正ID重复：将模态框ID改为SearchModal，输入框ID改为SearchInput，确保JS能正确获取输入框元素
2. 调整元素读取逻辑：直接从<li>本身读取文本内容，不再依赖不存在的<a>标签
3. 修复PHP语法：给echo的HTML代码加上双引号，使用{$infoRow->tire_id}正确解析变量
4. 清理无效标签：移除<ul>内的<br>标签，保证列表结构符合HTML规范

内容的提问来源于stack exchange，提问作者aiman