突出显示实时搜索结果

时间:2010-06-26 10:35:55

标签: javascript jquery

我正在尝试使用jquery.highlight突出显示与实时搜索中的查询匹配的文字。实时搜索工作正常,但突出显示的样式适用然后它消失。我做错了吗?

JQuery的

$(document).ready(function() {
    $("#search").bind("keyup", function() {
    var form = $(this).parents("form");
    var query = $(this).val();
    var formData = form.serialize();

    $.post("/questions/new/search", formData, function(html) { 
      $("#questionList").html(html);
    });

    $(".question").highlight(query);
  });
});

HTML

<form action="/questions" method="get">
    <input id="search" name="search" type="text" />
</form>

<div id="questionList">
    <div class="question">What is the 1 + 1?</div>
    <div class="answers">2</div>
</div>

1 个答案:

答案 0 :(得分:2)

是的,您应该在$(".question").highlight(query)之后立即在http请求响应处理程序中执行$("#questionList").html(html)

$(document).ready(function() {
    $("#search").bind("keyup", function() {
    var form = $(this).parents("form");
    var query = $(this).val();
    var formData = form.serialize();

    $.post("/questions/new/search", formData, function(html) { 
      $("#questionList").html(html);
      $(".question").highlight(query);
    });

  });
});