jQuery的autoComplete查看所有点击?

我使用jQuery的自动完成相对简单的方式:

$(document).ready(function() { var data = [ {text: "Choice 1"}, {text: "Choice 2"}, {text: "Choice 3"} ] $("#example").autocomplete(data, { matchContains: true, minChars: 0, formatItem: function(item) { return item.text; } } ); }); 

如何添加一个onclick事件(如button或链接),以显示自动填充的所有可用选项? 基本上我正在寻找一个自动完成和select/下拉元素的混合。

谢谢!

在文档中看不到明显的方法,但是尝试在启用自动填充的文本框上触发焦点(或单击)事件:

 $('#myButton').click(function() { $('#autocomplete').trigger("focus"); //or "click", at least one should work }); 

您可以触发此事件以显示所有选项:

 $("#example").autocomplete( "search", "" ); 

或者看下面的链接中的例子。 看起来正是你想要做的。

http://jqueryui.com/demos/autocomplete/#combobox

编辑 (从@cnanney)

注意:您必须在自动完成中为空searchstring设置minLength:0以返回所有元素。

我发现这个效果最好

 var data = [ { label: "Choice 1", value: "choice_1" }, { label: "Choice 2", value: "choice_2" }, { label: "Choice 3", value: "choice_3" } ]; $("#example") .autocomplete({ source: data, minLength: 0 }) .focus(function() { $(this).autocomplete('search', $(this).val()) }); 

它search标签并将值放入元素$(#example)

解决scheme: 显示焦点事件的jquery ui自动完成列表

解决scheme使其工作不止一次

 <script type="text/javascript"> $(function() { $('#id').autocomplete({ source: ["ActionScript", /* ... */ ], minLength: 0 }).focus(function(){ //Use the below line instead of triggering keydown $(this).data("autocomplete").search($(this).val()); }); }); 

为了显示所有项目/模拟combobox行为,您应该首先确保您已将minLength选项设置为0(默认值为1)。 然后,您可以绑定click事件以使用空string执行search。

 $('inputSelector').autocomplete({ minLength: 0 }); $('inputSelector').click(function() { $(this).autocomplete("search", ""); }); 

尝试这个:

  $('#autocomplete').focus(function(){ $(this).val(''); $(this).keydown(); }); 

minLength设置为0

每次工作:)

  $j(".auto_complete").focus(function() { $j(this).keydown(); }) 

这是唯一对我有用的东西。 每次显示列表,并在select时closures:

 $("#example") .autocomplete(...) .focus(function() { var self = this; window.setTimeout(function() { if (self.value.length == 0) $(self).autocomplete('search', ''); }); }) 

你可以使用这个:

 $("#example").autocomplete( "search", $("#input").val() ); 

这显示了所有的选项: "%" (见下文)

重要的是,你必须把它放在之前的#example声明之下,就像下面的例子。 这花了我一段时间才弄清楚。

 $( "#example" ).autocomplete({ source: "countries.php", minLength: 1, selectFirst: true }); $("#example").autocomplete( "search", "%" ); 

希望这有助于某人:

 $('#id') .autocomplete({ source: hints_array, minLength: 0, //how many chars to start search for position: { my: "left bottom", at: "left top", collision: "flip" } // so that it automatically flips the autocomplete above the input if at the bottom }) .focus(function() { $(this).autocomplete('search', $(this).val()) //auto trigger the search with whatever's in the box }) 
 <input type="text" name="q" id="q" placeholder="Selecciona..."/> <script type="text/javascript"> //Mostrar el autocompletado con el evento focus //Duda o comentario: http://WilzonMB.com $(function () { var availableTags = [ "MongoDB", "ExpressJS", "Angular", "NodeJS", "JavaScript", "jQuery", "jQuery UI", "PHP", "Zend Framework", "JSON", "MySQL", "PostgreSQL", "SQL Server", "Oracle", "Informix", "Java", "Visual basic", "Yii", "Technology", "WilzonMB.com" ]; $("#q").autocomplete({ source: availableTags, minLength: 0 }).focus(function(){ $(this).autocomplete('search', $(this).val()) }); }); </script> 

http://jsfiddle.net/wimarbueno/6zz8euqe/

必须minLenght设置为零才能使其工作! 这是一个工作的例子。

 $( "#dropdownlist" ).autocomplete({ source: availableTags, minLength: 0 }).focus(function() { $(this).autocomplete('search', $(this).val()) }); }); 

我解决了这个属性minChars:0和之后,触发两个点击。 (自动完成后显示1点击input)我的代码

 <input type='text' onfocus='setAutocomplete(this)'> function setAutocomplete(el){ $(el).unbind().autocomplete("./index.php", {autoFill:false, minChars:0, matchContains:true, max:20}); $(el).trigger("click");$(el).trigger("click"); } 

我已经看到了所有似乎完整的答案。

如果您想要在光标位于文本字段中时获取列表,或者当您单击匹配的标签时,在此处如何操作:

 //YourDataArray = ["foo","bar"]; $( "#YourID" ).autocomplete({ source: YourDataArray }).click(function() { $(this).autocomplete("search", " "); }); 

这在Firefox,IE浏览器,铬…

 $("#searchPkgKeyWord").autocomplete("searchURL", { width: 298, max: 1000, selectFirst: false }).result(function (event, row, formatted) { callback(row[1]); }).focus(function(){ $(this).click(); //once the input focus, all the research will show }); 

我无法得到$("#example").autocomplete( "search", "" ); 部分工作,只有一次,我改变了我的search与我的来源存在的字符它的工作。 所以我使用例如$("#example").autocomplete( "search", "a" );

我猜更好的select是把$(“#idname”)。autocomplete(“search”,“”); 进入文本框的onclick参数。 由于select,重点放在由jquery,这可以是一个解决方法。 不知道是否应该是一个可以接受的解决scheme。

我最近需要这样做,并尝试了几个不同的排列(使用onfocus,onclick文本框等)后,我终于在这个…

  <input id="autocomplete" name="autocomplete" type="text" value="Choose Document"> <p> <button type="submit" value="Submit" name="submit" id="submit" > Submit </button> </p> <script type="text/javascript"> $("#autocomplete").autocomplete( { source: '@Url.Content("~/Document/DocumentTypeAutoComplete/")' //<--ddl source , minLength: 0 // <-- This is necessary to get the search going on blank input , delay: 0 , select: function (event, ui) { if (ui.item) { $("#autocomplete").val(ui.item.value);//<-- Place selection in the textbox $("docForm").submit(); loadDocTypeCreatePartial(ui.item); $("#submit").focus(); //This stops the drop down list from reopening // after an item in the select box is chosen // You can place the focus anywhere you'd like, // I just chose my *submit* button } } }).focus(function () { // following line will autoselect textbox text // making it easier for the user to overwrite whats in the // textbox $(this).select(); //The below line triggers the search function on an empty string $(this).data("autocomplete").search(''); }); </script> 

这将打开焦点上的自动完成ddl列表(即使您的input框中有默认文本,就像我上面所做的那样)。

它还自动select文本框中的文本,以防止用户不得不清除文本。

从自动完成列表中select一个项目后,将该项目放入自动完成input框,并将焦点移至另一个控件(从而防止重新开始自动完成)。

我计划通过添加dynamicAjax调用来替代它,当我有机会的时候,通过融化冰升级来select非常漂亮的select列表。

我用这种方式:

 $("#autocomplete").autocomplete({ source: YourDataArray, minLength: 0, delay: 0 }); 

然后

 OnClientClick="Suggest(this); return false;"/> function Suggest(control) { var acControl = $("#" + control.id).siblings(".ui-autocomplete-input"); var val = acControl.val(); acControl.focus(); acControl.autocomplete("search");