Question

我想用JavaScript和PHP编写实时搜索程序，但是我遇到很多问题。我的网站上有两个单选按钮，用于定义类别和下面的文本输入。

我已经在JavaScript中测试了keyup函数，但对我而言却没有奏效。有其他选择吗？

<div class="container" style="text-align:center;">
    <div class="row">
      <div class="col-lg-12">
          <div class="">
            <form>
              <input type="radio" name="penis" id="cat_user" value="user" checked> User
              <input type="radio" name="penis" id="cat_cat" style="padding-right: 5px;" value="catmatice"> Category<br><br>
              <input type="text" class="input_text" name="search" id="search" autocomplete="off" placeholder="search user name here....">
            </form>
          </div>
         <div class="grind search">
           <ul>
             <div id="output"></div>
           </ul>
         </div>
      </div>
    </div>
 </div>

$(document).ready(function(){
  if (document.getElementById('cat_user').checked) {
    alert('HALLO');
    $("#search").keyup(function(){
      var query = $(this).val();
      if (query != "") {
        $.ajax({
          url: 'search.php',
          method: 'POST',
          data: {opt:'user',query:query},
          success: function(data){

            $('#output').html(data);
            $('#output').css('display', 'block');

            $("#search").focusin(function(){
              $('#output').css('display', 'block');
            });
          }
        });
      } else {
        $('#output').css('display', 'none');
      }
    });

  }

  if (document.getElementById('cat_cat').checked) {
    alert('LUL');
    $("#search").keyup(function(){
      var query = $(this).val();
      if (query != "") {
        $.ajax({
          url: 'search.php',
          method: 'POST',
          data: {opt:'cat',query:query},
          success: function(data){

            $('#output').html(data);
            $('#output').css('display', 'block');

            $("#search").focusin(function(){
              $('#output').css('display', 'block');
            });
          }
        });
      } else {
        $('#output').css('display', 'none');
      }

    });

  }
});

Answer 1

您可以使用此jQuery函数找出是否已选中复选框：

document.getElementById('cat_cat').is(":checked")

Answer 2

您可以使用这种方式

$('input[type="text"][id="search"]').on('change', function(e) {
  const selectedVal = $('input[type="radio"][name="penis"]:checked').val();
  $.ajax({
          url: 'search.php',
          method: 'POST',
          data: {opt:selectedVal,query:e['target']['value']},
          success: function(data){

            $('#output').html(data);
            $('#output').css('display', 'block');

            $("#search").focusin(function(){
              $('#output').css('display', 'block');
            });
          }
        });
      } else {
        $('#output').css('display', 'none');
      }
    });
});

您还可以将更改事件替换为所需事件。

Answer 3

切换事件监听器的顺序。

在您对“ cat_user”进行检查验证之前，它们必须走，否则，如果已在加载页面上检查“ cat_user”，则您仅在侦听键入事件。

也无需重复整个代码。

$(function(){
  $("#search").input(function(){
    var searchValue = $(this).val();
    if (searchValue == "") {
       $('#output').css('display', 'none');
    }else if (document.getElementById('cat_user').checked) {
      fetchSearch(searchValue, 'user');
    }else if(document.getElementById('cat_cat'),checked){
      fetchSearch(searchValue, 'cat');
    }else{
      $('#output').css('display', 'none');
    }
  })

  function fetchSearch(searchValue, searchType){
     $.ajax({
          url: 'search.php',
          method: 'POST',
          data: {opt: searchType, query: searchValue},
          success: function(data){
            $('#output').html(data);
            $('#output').css('display', 'block');
          }
        });
  }

})


}

如何获取当前输入值（单选按钮，文本输入）？

3 个答案: