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());

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

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

1 个答案: