Question

我试图通过点击自动完成结果下拉菜单上的输入按钮来获取查询结果。如果我使用鼠标单击我想要的结果但是如果我使用回车键将无法工作，它工作正常。

第一个函数获取自动完成结果，第二个函数提交结果以从该特定ID获取数据。

JQUERY

$(document).ready(function () {



$("#equipment").autocomplete({
    source: "search.php",
    minLength: 2,
    select: function(event, ui) {
     $('#eq_id').val(ui.item.id);
    }
  });



$(document).off("keypress", "#equipment");
$(document).on("keypress", "#equipment", function(event) {
//if (!e) e = window.event;   
if (event.keyCode == '13'){
$('#loading').show();
var eq_id = $("#eq_id").val();
var dataString = 'eq_id=' + eq_id;
$.ajax({
  type: "POST",
  url: "updateForm.php",
  data: dataString,
  success: function(html){
    $("#formAddEquip").hide();
    $("#showuserresult").show();
    $("#showuserresult").html(html);
    $("#equipment").val("");
    $('#loading').hide();
  }
});
 return false;
}
});
});

这是表格

<form action="" method="post" id="#somesearch">
<label for="equipment" id="eq_id_label">Search Equipment</label>
<input type="text" id="equipment" name="equipment" />
<input type="hidden" id="eq_id" name="eq_id" />
</form>

Answer 1

从这些改进开始

$(function() { // only one "load"

  $("#equipment").autocomplete({
    source: "search.php",
    minLength: 2,
    select: function(event, ui) {
      $('#eq_id').val(ui.item.id);
    }
  });

  $("#somesearch ").on("submit", function(e) {
    e.preventDefault(); // stop submission
  });

  $(document).on("keypress", "#equipment", function(event) {
    //if (!e) e = window.event;   
    if (event.keyCode == '13') {
      $('#loading').show();
      var eq_id = $("#eq_id").val();
      var dataString = 'eq_id=' + eq_id;
      $.ajax({
        type: "POST",
        url: "updateForm.php",
        data: dataString,
        success: function(html) {
          $("#formAddEquip").hide();
          $("#showuserresult").show();
          $("#showuserresult").html(html);
          $("#equipment").val("");
          $('#loading').hide();
        }
      });
    }
  });
});

使用enter按钮提交自动完成功能而不刷新页面

1 个答案: