使用輸入按鈕提交自動完成而不刷新頁面

Question

我試圖通過點擊自動完成結果下拉菜單上的輸入按鈕來獲取查詢結果。 如果我使用鼠標單擊我想要的結果，它可以正常工作，但如果我使用 Enter 鍵，它將無法正常工作。

第一個函數獲取自動完成結果，第二個函數提交結果以從該特定 id 獲取數據。

查詢

$(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();
        }
      });
    }
  });
});