JQuery AutoColpEte عرض الكل في النقر؟

Question

أنا أستخدم الإكمال التلقائي 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 (مثل زر أو رابط) الذي سيعرض جميع الخيارات المتاحة للإكمال التلقائي؟ أساسا أنا أتطلع إلى جعل الهجين من الإكمال التلقائي وعنصر محدد / المنسدلة.

شكرا!

Answer 1

لا أستطيع أن أرى طريقة واضحة للقيام بذلك في المستندات، لكنك تحاول تشغيل حدث التركيز (أو النقر) على مربع النص الممكن الإكمال التلقائي:

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

Answer 2

يمكنك تشغيل هذا الحدث لإظهار كل الخيارات:

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

أو انظر المثال في الرابط أدناه. يشبه بالضبط ما تريد القيام به.

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

تعديل (من Cnanney)

ملاحظة: يجب عليك تعيين Minlength: 0 في الإكمال التلقائي الخاص بك للحصول على سلسلة بحث فارغة لإرجاع جميع العناصر.

Answer 3

لقد وجدت هذا للعمل بشكل أفضل

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

يبحث في الملصقات ويضع القيمة في العنصر $ (# مثال)

Answer 4

من أجل إظهار جميع العناصر / محاكاة سلوك Combobox، يجب عليك أولا التأكد من تعيين خيار Minlength إلى 0 (الافتراضي هو 1). ثم يمكنك ربط الحدث Click لإجراء بحث مع السلسلة الفارغة.

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

Answer 5

حل من: عرض 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());
    });
});

Answer 6

جرب هذا:

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

و طول دقيقة ضبط ل 0

يعمل في كل مرة :)

Answer 7

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

Answer 8

أنت يجب تعيين minLength ل صفر من أجل جعل هذا العمل! هنا هو مثال العمل.

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

Answer 9

هذا هو الشيء الوحيد الذي يعمل بالنسبة لي. تظهر قائمة في كل مرة وتغلق عند الاختيار:

$("#example")
.autocomplete(...)
.focus(function()
{
  var self = this;

  window.setTimeout(function()
  {
    if (self.value.length == 0)
      $(self).autocomplete('search', '');
  });
})

Answer 10

يمكنك استخدام هذا:

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

Answer 11

هذا يدل على جميع الخيارات: "%" (انظر أدناه)

الشيء المهم هو أنه يجب عليك وضعه تحت إعلان # EXPLES السابق، كما هو الحال في المثال أدناه. هذا استغرقني بعض الوقت لمعرفة ذلك.

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

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

Answer 12

أمل أن هذا يساعد شخصاما:

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

Answer 13

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

Answer 14

قمت بحل هذا باستخدام السمة Minchars: 0 وبعد، يؤدي النقر إلى النقر. (عروض التلقائي بعد 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");
}

Answer 15

لقد رأيت كل الإجابات التي يبدو أنها كاملة.

إذا كنت ترغب في الحصول على القائمة عندما يكون المؤشر في حقل النص أو عند النقر فوق تسمية المطابقة، فهذا ما يمكنك القيام به:

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

هذا يعمل بشكل جيد في فايرفوكس، أي كروم ...

Answer 16

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

Answer 17

لم أستطع الحصول على $("#example").autocomplete( "search", "" ); جزء للعمل، بمجرد تغيير بحثي بحرف موجود في مصدري يعمل. لذلك أنا استخدمت على سبيل المثال $("#example").autocomplete( "search", "a" );.

Answer 18

أعتقد أن خيار أفضل هو وضع $ ("# IDNAME"). الإكمال التلقائي ("البحث"، ")؛ في علامة onclick من مربع النص. منذ ذلك الحين، يتم التركيز في JQuery، وهذا يمكن أن يكون الحل البديل. لا أعرف إذا كان ينبغي أن يكون حلا مقبولا.

Answer 19

كنت بحاجة للقيام بذلك مؤخرا وبعد محاولة عدد قليل من التباديل المختلفة (باستخدام OnFocus، OnClick Textbox، إلخ، استقر أخيرا على هذا ...

 <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 الديناميكية إلى لطيفة جدا اختيار حدد قوائم مع ذوبان الجليد الترقية عندما أحصل على فرصة.

Answer 20

اعتدت بهذه الطريقة:

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

Answer 21

يمكنك أيضا استخدام وظيفة البحث دون معلمات:

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