javascript - 在同一页面中两次使用 livesearch 文本框

Question

我在我的网页中使用了下面的 Livesearch 代码，它在学生表单中运行良好。但是在第二个文本框(员工表格)的索引页面中，实时搜索不起作用。我希望这是由于使用了属性 ID 的 JQuery 函数，这对于两个输入文本框都是相同的。有没有办法在不更改整个代码的情况下在第二个文本框中进行实时搜索？

提前致谢

livesearch.js

$('#college').keyup(function(e)
{   
if ( key != 40 && key != 38 && key != 13 ) livesearch();
}

function livesearch() {
var min_length = 1; // min caracters to display the autocomplete
var keyword = $.trim($('#college').val());
if (keyword.length >= min_length) {
    $.ajax({
        url: 'livesearch.php',
        type: 'POST',
        data: {keyword:keyword},
        success:function(data){
            $('#college_list').show();
            $('#college_list').html(data);
        }   
    });

} else {
    $('#college_list').hide();
}
}

index.php

<div id="student">
     <form action="/" method="post">
        <div class="field-wrap">
        <input type="text" id="college"  placeholder="College Name" required 
        autocomplete="off"/>
          <ul id="college_list"></ul>
        </div>
           <button type="submit" class="button button-block"/>Get 
            Started</button>
      </form>   

    <!-- Another Division similar to previous one-->

    <div id="staff">
      <form action="/" method="post">
        <div class="field-wrap">
        <input type="text" id="college"  placeholder="College Name" required 
        autocomplete="off"/>
          <ul id="college_list"></ul>
        </div>
           <button type="submit" class="button button-block"/>Get 
            Started</button>
      </form>   

livesearch.php

$parts = explode(' ', $keyword);
    $p = count($parts);

    $sql = "SELECT * FROM colleges WHERE college_id is not null"; 
    for($i = 0; $i < $p; $i++) {
    $sql .= " AND college_name LIKE '%$parts[$i]%'";
    }

    $query = $pdo->prepare($sql);
    $query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
    $query->execute();
    $list = $query->fetchAll();
    foreach ($list as $rs) {

    // Highlight the written text
    $college_name = highlight($keyword,$rs['college_name']);

    // add new option
    echo '<li onclick="set_item(\''.str_replace("'", "\'", 
    $rs['college_name']).'\')">'.$college_name.'</li>';
    }

Answer 1

您正在定位具有 id 的元素 - 在第一行:

$('#college').keyup(function(e) { ... }

如果您将其切换为一个类，例如 .live-search 并将该类添加到您的 HTML 元素中，那么该脚本应该自然地适用于多个元素。

HTML 中的 ID 应该是唯一的，而类可以应用于多个元素。

更新:您可能还需要切换此行:

var keyword = $.trim($('#college').val());

改为引用this:

var keyword = $.trim($(this).val());

这将确保当您检测到该元素上的 keyup 时，脚本会作用于该特定元素。