jQuery UI自動完成行爲。如何搜索輸入的自由文本？

Question

第一個問題（並希望，但懷疑我只有一個）

我正在使用jQuery UI自動完成。以下是複製我的問題的示例代碼。

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"]; 

$("#autocomplete").autocomplete({ 
    source: suggestions 
}); 

當用戶鍵入'J'時，他們會被提示'Clojure'和'JavaScript'作爲建議。

我從這個列表中省略了Java，如果用戶想要搜索Java，他們鍵入'Java'，請按回車鍵但表單不提交。如果您添加一個空格，'JavaScript'建議消失，並且可以通過按回車鍵提交表單。

我正在創建免費搜索，我希望用戶能夠通過按Enter鍵進行搜索，即使有可用的建議。

$("#autocomplete").keypress(function(event) { 
    alert(event.keyCode); 
    if (event.keyCode=='13') $this.closest('form').submit(); 
}); 

我嘗試了上述想法我可以手動檢測提交按鍵並提交表單，但該警報顯示檢測到所有按鍵EXCEPT提交這似乎是由自動完成被抑制。

任何幫助，非常感謝！謝謝。

Answer 1

UPDATE

我不得不做出一些改變，但這樣做在此之後代碼工作正常，在我的身邊。首先，e.keycode應該是e.keyCode。我並不認爲案件重要，但確實如此。另外，當你檢查keyCode是輸入按鈕時，確保你沒有引用13。如果你這樣做，它將無法正常工作。下面是新的代碼：

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"]; 
$("#autocomplete").autocomplete({ 
    source: suggestions 
}).keypress(function(e) { 
    if (e.keyCode === 13) { 
     $(this).closest('form').trigger('submit'); 
    } 
}); 

---

的按鍵功能應該看起來像下面，並且也可以鏈自動完成和按鍵功能，使其對你更容易。下面的代碼應該工作。

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"]; 
$("#autocomplete").autocomplete({ 
    source: suggestions 
}).keypress(function(e) { 
    if (e.keycode === 13) { 
     $(this).closest('form').trigger('submit'); 
    } 
}); 

Answer 2

自動完成supresses提交，但這個工作對我來說是解決方法：

jQuery.fn.go_url = function(id) { 
    var url="gl10.pl?ar=2010&listi=ts&niv=stovnsnr&rl=1290693052914&stovnsnr=replaceme"; 
    var ok; 
    if (ok=id.match(/^\d{6}$/)) { 
     url=url.replace(/replaceme/g,id); 
     location=url; 
    } 
} 
jQuery(function() { 
    jQuery("#stovnar").autocomplete({ 
     source: "autocomplete.pl?pname=stovnsnr", 
     minLength: 3, 
     select: function(event, ui) { if (ui.item) { jQuery.fn.go_url(ui.item.id); } } 
    }); 
}).keypress(function(e) { 
    if (e.keyCode === 13) { 
     v=jQuery("#stovnar").val(); 
     jQuery.fn.go_url(v) 
    } 
}); 

Answer 3

使用1.8.5用戶界面自動完成插件版本：

尋找此位的代碼

「case d.ENTER：case d.NUMPAD_ENTER：a.menu.element.is（」：visible「）& & c.preventDefault（）;」

並刪除或註釋掉它。

基本上是上面說的，但是從當前版本的插件。

歡呼

皮特

Answer 4

這是我做過什麼

<div class="ui-widget"> 
    <form action="javascript:alert('hey run some javascript code')"> 
     <input id="search" /> 
    </form> 
</div> 

Answer 5

我有同樣的問題，並考慮使用驗證來做到這一點的，但最後我的解決方案看起來整件事比本頁其他解決方案更容易：

1. 使輸入fi字段中輸入文字，名稱爲#input，隱藏輸入名稱爲#hiddeninput。您的搜索後端必須使用#hiddeninput的值。

2. 內自動完成的，#hiddeninput的值設置爲request.term：（我設置這裏面$.ajax({ success: })）

$（ 「＃輸入hiddeninput」）VAL（request.term。 ）;

1. 設置與選擇的自動完成： - 方法，填補了隱藏的輸入與被選擇的建議：

select: function(event, ui) { 
    $("input#input").val(ui.item.label), 
    $("input#hiddeninput").val(ui.item.nr), 
    //Auto-submit upon selection 
    $(this).closest("form").submit(); 
} 

現在搜索將在執行什麼用戶一直輸入，直到他從建議列表中選擇一些東西。

Answer 6

我有類似的問題，當用戶從列表中選擇一個建議，是否點擊了所選的建議或按下了回車鍵時，jquery-ui自動完成窗口小部件觸發選擇事件。但是，如果用戶鍵入文本並按下輸入鍵而沒有從列表中選擇項目，它什麼也沒做。發生這種情況時，我需要進行搜索。

很容易添加keypress事件處理程序，但它激發了是否進行了選擇。所以我添加了一個變量didSelect，以保持選擇狀態。

下面是完整的解決方案：

$(function() { 
var didSelect = false; 

$("#search").autocomplete({ 
    source: "/my_remote_search", 
    minLength: 2, 
    search: function (event, ui) { 
     didSelect = false; 
     return true; 
    }, 
    select: function(event, ui) { 
     if (ui.item) { 
      didSelect = true; 
      my_select_function(ui.item); 
     } 
    } 
}).keypress(function(e) { 
    if (e.keyCode == 13) { 
     if (! didSelect) { 
      my_search_function($("#search").val()); 
     } 
    } 
}); 

}）;

Answer 7

<script> 
    $(function() { 
     $('#student').autocomplete({ 
      source: '../ajx/student_list.php', 
      minLength: 3, 
      response: function(event, ui) { 
       $('#student_id').val(ui.content[0].id); 
      }, 
      select: function(event, ui) { 
       $('#student_id').val(ui.item.id); 
       $(this).closest('form').trigger('submit'); 
      } 
     }).keypress(function(e) { 
      if (e.keyCode === 13) { 
       $(this).closest('form').trigger('submit'); 
      } 
     }); 
    }); 
</script> 
<div> 
    <form action='../app/student_view.php'> 
     <input name='student_id' id='student_id' type='hidden' value=''> 
     <label for='student'>Student: </label> 
     <input id='student' /> 
    </form> 
</div> 

這裏我使用了自動完成來搜索一個學生。如果用戶按下ENTER，即使沒有從列表中選擇任何內容，表單也會提交。 '響應'事件將使用列表中的第一項更新隱藏輸入字段的值。他們也可以點擊或從列表中選擇。