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，即使没有从列表中选择任何内容，表单也会提交。 '响应'事件将使用列表中的第一项更新隐藏输入字段的值。他们也可以点击或从列表中选择。