jQueryオートコンプリートすべて表示をクリックしますか? -- jquery フィールド と autocomplete フィールド と jquery-autocomplete フィールド 関連 問題

jQuery autoComplete view all on click?












67
vote

問題

日本語

比較的簡単な方法で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イベント(ボタンやリンクなど)を追加しますか?基本的には、オートコンプリートと選択/ドロップダウン要素のハイブリッドを作成しています。

ありがとう!

英語

I'm using jQuery's autocomplete in a relatively simple way:

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

How do I add an onclick event (like a button or a link) that will display all the available choices for the autocomplete? Basically I'm looking to make a hybrid of an autocomplete and a select/dropdown element.

Thanks!

</div
        

回答リスト

19
 
vote
vote
ベストアンサー
 

ドキュメント内でそれをするための明らかな方法がわかりませんが、オートコンプリート対応テキストボックスでフォーカス(またはクリック)イベントをトリガーしようとします。

<事前> <コード> +9
 

I can't see an obvious way to do that in the docs, but you try triggering the focus (or click) event on the autocomplete enabled textbox:

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

このイベントをトリガーして、すべてのオプションを表示できます。

<事前> <コード> str0

または下のリンクの例を参照してください。あなたがやりたいことを正確に似ています。

http://jqueryui.com/demos/autocomplete/#ombobox 編集(@ cnanney)

注:空の検索文字列のMINLENGTHを設定する必要があります。空の検索文字列はすべての要素を返します。

 

You can trigger this event to show all of the options:

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

Or see the example in the link below. Looks like exactly what you want to do.

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

EDIT (from @cnanney)

Note: You must set minLength: 0 in your autocomplete for an empty search string to return all elements.

</div
 
 
         
         
39
 
vote

これは最高の機能を見つけました

<事前> <コード> 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()) });

ラベルを検索し、その値を要素$(#例)

に配置します。
 

I found this to work best

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

It searches the labels and places the value into the element $(#example)

</div
 
 
   
   
7
 
vote

すべての項目を表示するには/ ComboBoxの振る舞いをシミュレートするには、まずMINLENGTHオプションを0に設定している必要があります(デフォルトは1)。その後、クリックイベントをバインドして空の文字列を使用して検索を実行できます。

<事前> <コード> $('inputSelector').autocomplete({ minLength: 0 }); $('inputSelector').click(function() { $(this).autocomplete("search", ""); });
 

In order to show all items / simulate combobox behavior, you should first ensure you have set the minLength option to 0 (default is 1). Then you can bind the click event to perform a search with the empty string.

$('inputSelector').autocomplete({ minLength: 0 }); $('inputSelector').click(function() { $(this).autocomplete("search", ""); }); 
</div
 
 
6
 
vote

これを試してみてください:

<事前> <コード> $('#autocomplete').focus(function(){ $(this).val(''); $(this).keydown(); });

minlength 0

に設定

は毎回作用します:)

 

try this:

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

and minLength set to 0

works every time :)

</div
 
 
5
 
vote

ソリューションから: jail-event"> jQuery UIオートコンプリートリストの表示フォーカスイベント

それを複数回働くための解決策

<事前> <コード> <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()); }); });

 

solution from: Display jquery ui auto-complete list on focus event

The solution to make it work more than once

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

</div
 
 
4
 
vote
<事前> <コード> <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/

 
<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/

</div
 
 
4
 
vote

この作業をするために、 set minLength ゼロを設定する必要があります。これが実施例です。

<事前> <コード> $( "#dropdownlist" ).autocomplete({ source: availableTags, minLength: 0 }).focus(function() { $(this).autocomplete('search', $(this).val()) }); });
 

You must set minLength to zero in order to make this work! Here is the working example.

$( "#dropdownlist" ).autocomplete({       source: availableTags,       minLength: 0      }).focus(function() {       $(this).autocomplete('search', $(this).val())     }); }); 
</div
 
 
3
 
vote
<事前> <コード> $j(".auto_complete").focus(function() { $j(this).keydown(); })
 
 $j(".auto_complete").focus(function() { $j(this).keydown(); }) 
</div
 
 
   
   
2
 
vote

これは私にとって働く唯一のものです。リストは毎回毎回閉じます:

<事前> <コード> $("#example") .autocomplete(...) .focus(function() { var self = this; window.setTimeout(function() { if (self.value.length == 0) $(self).autocomplete('search', ''); }); })
 

this is the only thing that works for me. List shows everytime and closes upon selection:

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

これを使用できます。

<事前> <コード> $("#example").autocomplete( "search", $("#input").val() );
 

you can use this:

$("#example").autocomplete( "search",  $("#input").val() ); 
</div
 
 
2
 
vote

これはすべてのオプションを示します: $('inputSelector').autocomplete({ minLength: 0 }); $('inputSelector').click(function() { $(this).autocomplete("search", ""); }); 0 (下記参照)

重要なことは、以下の例のように、前回の#example宣言の下に配置する必要があるということです。これは私を把握するために私を連れて行きました。

<事前> <コード> $('inputSelector').autocomplete({ minLength: 0 }); $('inputSelector').click(function() { $(this).autocomplete("search", ""); }); 1
 

this shows all the options: "%" (see below)

The important thing is that you have to place it underneath the previous #example declaration, like in the example below. This took me a while to figure out.

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

これが誰かに役立つことを願っています:

<事前> <コード> $('inputSelector').autocomplete({ minLength: 0 }); $('inputSelector').click(function() { $(this).autocomplete("search", ""); }); 2
 

hope this helps someone:

$('#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         }) 
</div
 
 
1
 
vote

これを使ってこれを解決しました 属性MINCHARS:0以降、2回のクリックをトリガーします。 (1入力をクリックするとオートコンプリートショーが表示されます) 私のコード

<事前> <コード> $('inputSelector').autocomplete({ minLength: 0 }); $('inputSelector').click(function() { $(this).autocomplete("search", ""); }); 3
 

I solved this using attribute minChars:0 and after, trigger two clicks. (autocomplete shows after 1 click on input) my code

<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"); } 
</div
 
 
1
 
vote

私は完全なように見えるすべての答えを見ました。

カーソルがテキストフィールドにあるとき、または一致するラベルをクリックしたときにリストを取得したい場合は、ここでどのようなできることができます。

<事前> <コード> $('inputSelector').autocomplete({ minLength: 0 }); $('inputSelector').click(function() { $(this).autocomplete("search", ""); }); 4

これはFirefoxでうまく機能します。つまり、Chrome ...

 

I have seen all the answers which seem to be complete.

If you want to get the list when the cursor is in the text field OR when you click on the matching label, here how you can do:

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

this works fine in Firefox, IE, Chrome ...

</div
 
 
1
 
vote
<事前> <コード> $('inputSelector').autocomplete({ minLength: 0 }); $('inputSelector').click(function() { $(this).autocomplete("search", ""); }); 5
 
$("#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         }); 
</div
 
 
0
 
vote

$('inputSelector').autocomplete({ minLength: 0 }); $('inputSelector').click(function() { $(this).autocomplete("search", ""); }); 6 の部品を作動させることができませんでした。だから私はe.を使った。 <コード> $( "#dropdownlist" ).autocomplete({ source: availableTags, minLength: 0 }).focus(function() { $(this).autocomplete('search', $(this).val()) }); }); 17 。

 

I could not get the $("#example").autocomplete( "search", "" ); part to work, only once I changed my search with a character that exists in my source it work. So I then used e.g. $("#example").autocomplete( "search", "a" );.

</div
 
 
   
   
0
 
vote

私はより良いオプションを推測することです( "#idname")。オートコンプリート( "検索"、 "");テキストボックスのonclickパラメータに。 SELECTでは、jQueryによってフォーカスが置かれているので、これは回避策になる可能性があります。 それが許容できる解決策であるべきかどうかわからない。

 

I guess a better option is to put $("#idname").autocomplete( "search", "" ); into the onclick paramter of the text box . Since on select, a focus is put in by jquery , this can be a workaround . Dont know if it should be an acceptable solution.

</div
 
 
0
 
vote

私は最近そしていくつかの異なる順列を試した後(onfocusを使用して、TextBoxなどのonlickなど)を試みる必要がありました、私はついにこの...

<事前> <コード> <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リストを開きます(上記のような入力ボックスにデフォルトのテキストがある場合でも)。

テキストボックスのテキストを自動選択して、ユーザーがテキストを消去しなくてもらう必要がありません。

オートコンプリートリストから項目を選択すると、その項目を自動完全入力ボックスに入れ、フォーカスを別のコントロールに移動します(したがって自動的に完了するのを防ぎます)。

非常に素晴らしい chosen を選択することで、それを交換することを計画しています。 / a> アップグレードチャンスを入手してください。

 

I needed to do this recently and after trying a few different permutations (using onfocus, onclick of textbox etc), I finally settled on this...

 <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> 

This opens the autocomplete ddl list on focus (Even if you have default text in your input box like I do above).

It also auto-selects the text in the text box to prevent the user from having to clear out the text.

Once an item is selected from the auto-complete list, it puts that item into the auto-complete input box and moves the focus to another control (thus preventing the auto-complete from reopening).

I plan on replacing it by adding dynamic Ajax calls to the very nice Chosen select lists with the Melting Ice upgrade when I get a chance.

</div
 
 
0
 
vote

私はこのようにして使った:

<事前> <コード> $("#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");
 

I used this way:

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

Then

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"); 
</div
 
 
0
 
vote

パラメータなしで検索機能を使用することもできます。

<事前> <コード> jQuery("#id").autocomplete("search", "");
 

You can also use search function without parameters:

jQuery("#id").autocomplete("search", ""); 
</div
 
 
0
 
vote

入力値が空の検索の場合は、入力内の値が入力されます。このコードは私のために機能します:

<事前> <コード> $("#your_input").on('focus', function () { $(this).autocomplete('search', $(this).val() == '' ? " " : $(this).val()); });
 

When input value is empty search else the value inside input. This code works for me:

$("#your_input").on('focus', function () {    $(this).autocomplete('search', $(this).val() == '' ? " " : $(this).val());     }); 
</div
 
 

関連する質問

0  PHPはJSONアレイの最初の列をエンコードします  ( Php encode json array just first column ) 
N行の配列の最初の列だけをEncondeする必要があります。 <事前> <コード> Array ( [0] => Array ( [FamilyName] => Dikkartan, Bartu [Balance] ...

1  jQueryオートコンプリートコンボオブジェクトエラー:キャッチされていないTypeError:オブジェクト[オブジェクトオブジェクト]にはメソッド 'ボタンがありません。  ( Jquery autocomplete combobox error uncaught typeerror object object object h ) 
jQuery UIプラグインを使用してオートコンプリートコンボボックスを実装しようとしています。 下記のコードで、オートコンプリート部分を達成できるが、ドロップダウン部分を達成することはできないが(ドロップダウン矢印が表示されないため) <事前> <コー...

1  リモートデータソースを持つ基本jQueryオートコンプリート--how?  ( Basic jquery autocomplete with remote data source how ) 
リモートデータを操作するオートコンプリートを取得するための適切な方法は何ですか?私はの文書を読みました http://docs.jquery.com/plugins/autocomplete と例のコードを実行しました。この例では、JS配列に保存されて...

1  JQueryuiオートコンプリート私は何をしているのか  ( Jqueryui autocomplete what m i doing wrong ) 
それで、ERESは、入力から2つの変数を呼び出し、「#key」変数の2つの変数を呼び出し、「Split(this.value)」からのデータベース内の最後の呼び出し。このようなものにしてください //これは元気です テューサー:カレンガラント、ヨー州モンチャ...

2  jQuery 1.8カテゴリのオートコンプリートの問題  ( Jquery 1 8 autocomplete with categories issue ) 
現在のコードはjQuery 1.7.xを使用しています。私はjQuery 1.8にアップグレードしたいのですが、私は私のオートコンプリート機能の問題に遭遇しています。同じコードを持つ2つのJSFIDDLEを作成しました。一例では、それは正しく機能しない。メイン...

0  フォーム上の他のフィールドからのオートコンプリート値  ( Autocomplete values from other fields on form ) 
フォーム上の他の入力フィールドから値をjQueryオートコンプリート機能で入力に渡したいと思います。私はいくつかの方法を試していますが、それらのどれも仕事をしません。これは私がこれまでに持っているものの例です: HTML: <事前> <コード> <input...

4  自動完了後のテキストボックスをjQueryで選択します  ( Clear textbox after auto complete select in jquery ) 
jQueryを使用してオートコンプリートを実装しました。データを選択すると、結果テーブルに保存されます。これを選択した後、AutoComplete TextBoxをクリアする必要があります。同じことを検索してこの選択後のオートコンプリートのクリアテキストボッ...

1  BootBox.DialogとAutoOpomplete Dialogの背後に表示されています  ( Bootbox dialog and autocomplete showing behind dialog ) 
BOOTBOX.DIALOGの後ろに表示されているjQueryオートコンプリートに問題がある schedulinging.jsにbootbox.dialogを表示してから、ビューのコントロールに私のオートコンプリートを添付してください。 jQuery 1.1...

0  jQueryオートコンプリートのヘルプ  ( Help with jquery autocomplete ) 
私は次の形式でJSONを持っています。 <事前> <コード> [{"tag":{"name":"& Awards","id":142}},{"tag":{"name":"& Bisexual Bars","id":207}},{"tag":{"name":"&...

1  jQueryのオートコンプリートを入力するだけではなく、TextAreaフィールドの代わりにコンテンツ提供可能なDIVのために機能する方法  ( How to make jquery autocomplete to work for a contenteditable div instead of jus ) 
http://docs.jquery.com/plugins/autocomple.com/plugins/autocompletex/a >入力フィールドまたはTextAreaフィールドで作業できます。属性をcontenteditable = "true...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有