dqys98341
2014-12-30 23:02
浏览 23

Jquery php实时搜索文本在搜索栏中消失

I am new to jquery and am trying to make a live search from my existing search page where you have to press enter.

This is the code I have made so far.

$( document ).ready(function() {


   $('#searchhh').on("input", function() {
   var searchquery = this.value;
   $( "#searchform" ).submit();


   });
});

This gets the input of the form and searches it every key stoke. The problem is the text that the user types resets every time the form submits. I tried to post the search value as a get variable and display it as the search bars value and auto focus into the the search bar every time the page reloads, this puts the typing bar at the beginning of the form before what the user has typed.

I feel like I am approaching this the wrong way please help. :)

图片转代码服务由CSDN问答提供 功能建议

我是jquery的新手,我正在尝试从现有的搜索页面进行实时搜索,您必须按Enter键 。

这是我到目前为止所做的代码。

  $(document).ready(function(){
 \  n 
 $('#searchhh')。on(“input”,function(){
 var searchquery = this.value; 
 $(“#searchform”)。submit(); 
 
 
  }}; 
}); 
   
 
 

这将获取表单的输入并在每次键提示时搜索它。 问题是每次表单提交时用户键入的文本都会重置。 我试图将搜索值作为get变量发布并将其显示为搜索栏值并在每次页面重新加载时自动聚焦到搜索栏中,这会将键入栏放在表单开头之前,而不是用户键入的内容 。

我觉得我正在以错误的方式接近这一点请帮忙。 :)

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douyao4632 2014-12-31 02:28
    已采纳

    You need to post your form via ajax. Here's a simple fiddle to demonstrate this:

    http://jsfiddle.net/e76d09vw/

    HTML:

    <form id="searchform" method="post" action="some_url_here">
        <input type="text" name="search" placeholder="Search..." />
    </form>
    
    Results:<br>
    <div id="results"></div>
    

    JS:

    $('#searchform').on("keyup", "input", function() {
    
        var form_data = $("#searchform").serialize();
        var form_url = $("#searchform").attr("action");
        var form_method = $("#searchform").attr("method").toUpperCase();
    
        $.ajax({
            url: form_url, 
            type: form_method,      
            data: form_data,     
            cache: false,
            success: function(returnOutput){ 
                // Your search results are outputted here
                $("#results").html(returnOutput); 
            }           
        });    
    
    });
    
    打赏 评论

相关推荐 更多相似问题