使用单选按钮进行AJAX实时搜索

时间:2018-07-21 02:11:38

标签: php mysql ajax

我能够在输入字段上使用jQuery AJAX实时搜索,并且它返回我想要的期望结果。 例如:搜索我的单词将返回所需的结果。

但是现在我想对两个字段进行复合搜索。 例如 : 今天搜索单词+ 要么 搜索明天的单词+ 这就是我所拥有的,但是它不起作用或不返回任何错误。

index.php

.type

quicksearch.php

var xhr = new XMLHttpRequest();
xhr.onerror = e => console.log(
  'ProgressEvent ? ', e instanceof ProgressEvent,
  '"error" event ? ', e.type
);
xhr.open('foo', 'bar://baz');
xhr.send();

search.js

<form>
        <input placeholder="Search the area" class="input-large search-query" type="text" id="key">
        <input type="radio" name="b_selected" class="radio" value="1"  > Today
        <input type="radio" name="b_selected" class="radio"  value="2"  > Tomorrow<br>
            <div class="result"><div class="loading"></div></div>
            </form> 

1 个答案:

答案 0 :(得分:0)

您应该发布两个变量-单词加上单选按钮的值。如果仅发布单词或仅发布单选按钮-您将不会获得想要的东西:

$(document).ready( function() 
{
    $(".result").hide();

    /*quick search*/
    $("#key").keyup( function()
    {
    var key = $(this).val();
    var b_selected = $('input[type="radio"]').val();

    $.ajax({
      method: "POST",
      url: "quicksearch.php",
      data:
            { 
                key: key,
                b_selected: b_selected
            },
      success: function(response) 
      {
        $(".result").slideDown().html(response);
      }
    });
    });

    /* Search for work plan for today or Tomorrow*/
  $('input[type="radio"]').click(function()
    {
     var key = $('#key').val();
     var b_selected = $(this).val();

     $.ajax({
        method: "POST",
        url: "quicksearch.php",
        data:
                {
                    key: key,
                    b_selected: b_selected
                },
        success: function(response)
                {
           $('#result').slideDown().html(response);
        }
     });
  });
})