jQueryのオートコンプリートはクリックですべてを見ますか？

https://stackoverflow.com/questions/1268531

13-09-2019
|

質問

私は、比較的簡単な方法で、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イベントを追加できますか？基本的に私は、オートコンプリート、ドロップダウン/ select要素のハイブリッドを作るために探しています。

ありがとうございます。

解決

私はドキュメントであることを行うには明白な方法を見ることはできませんが、フォーカスをトリガー（またはクリック）してみてくださいオートコンプリートが有効テキストボックスのイベント：

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

他のヒント

あなたはすべてのオプションを表示するには、このイベントをトリガすることができます：

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

または下記のリンクの例を参照してください。あなたがしたい正確に何のように見えます。

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

編集（@cnanneyから）

注：すべての要素を返すために、空の検索文字列のためにあなたのオートコンプリートで0

：あなたははminLengthを設定する必要があります。

私はこれが最適に動作することがわかっ

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

これは、ラベルを検索し、要素$（＃例）に値を配置します。

コンボボックスの挙動をシミュレートする/すべての項目を表示するには、まずあなたが（デフォルトは1）0にはminLengthオプションを設定して確認する必要があります。そして、あなたは空の文字列で検索を実行するためにクリックイベントをバインドすることができます。

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

ソリューションから：上表示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());
    });
});

この方法を試してください。

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

とのはminLengthするの 0 の

に設定します

たびに動作します。）

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

は、を必要との設定minLengthのこの作業を行うために、のゼロ！ここでは実施例である。

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

これは私の作品唯一のものです。リストが毎回を示し、選択時に閉じます：

$("#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/する

私が使用してこれを解きます minChars属性：0とした後、2回のクリックを誘発します。（オートコンプリートは、入力上の1回のクリックした後に表示されます）私のコード

<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", "" );の一部を取得できませんでした。だから私は、その後、例えば使用しました$("#example").autocomplete( "search", "a" );ます。

。

私はより良いオプションは$（ "＃のidname"）を置くことであると思いオートコンプリート（ "検索"、 ""）;テキストボックスのonclickのをPARAMTERに。選択の上、フォーカスがjqueryので入れているので、これは回避策することができます。それが受け入れ可能な解決策であるべきかどうかを知るいけます。

私は、私は最終的にこれに落ち着い（テキストボックスなどのonclickの、ONFOCUSを使用して）最近、いくつかの異なる順列を試した後、これを行うために必要な...

 <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リストを開きます。

また、テキストをクリアすることからユーザーを防ぐために、テキストボックス内のテキストを自動選択します。

の項目がオートコンプリートリストから選択されると、それはオートコンプリート入力ボックスにそのアイテムを置き、別のコントロールにフォーカスを移動（従って防止オートコンプリート再開から）。

私は、動的Ajaxを追加することによって、それを置き換えることを計画は非常にいい の選ばれたの<の呼び出し/> の氷を融解することはときに私のアップグレードチャンスを得る。

私はこの方法を使用します：

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

また、パラメータを指定せずに検索機能を使用することができます：

jQuery("#id").autocomplete("search", "");

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow