JQuery UI स्वतः पूर्ण में परिणाम सीमित करें

126

मैं jQuery UI स्वत: पूर्ण का उपयोग कर रहा हूं।

 $("#task").autocomplete({
     max:10,
     minLength:3,
     source: myarray
 });

अधिकतम पैरामीटर काम नहीं करता है और मुझे अभी भी 10 से अधिक परिणाम मिलते हैं। क्या मैं कुछ भूल रहा हूँ?

jquery-ui autocomplete jquery-ui-autocomplete

— संतोष
स्रोत

11

maxस्वतः पूर्ण में कोई विकल्प नहीं है

— जयंता लाल सिरीसेना

272

यहाँ jQueryUI विजेट के लिए उचित प्रलेखन है । अधिकतम परिणामों को सीमित करने के लिए कोई अंतर्निहित पैरामीटर नहीं है, लेकिन आप इसे आसानी से पूरा कर सकते हैं:

$("#auto").autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(myarray, request.term);

        response(results.slice(0, 10));
    }
});

आप एक फ़ंक्शन को sourceपैरामीटर को आपूर्ति कर सकते हैं और फिर sliceफ़िल्टर्ड सरणी पर कॉल कर सकते हैं ।

यहाँ एक कार्यशील उदाहरण दिया गया है: http://jsfiddle.net/andrewwhitaker/vqwBP/

— एंड्रयू व्हाइटेकर
स्रोत

7

एक जादू की तरह काम करता है। क्या यह बहुत उपयोगी है यदि आपकी स्वतः पूर्णता सूची बहुत लंबी है (~ 10k परिणाम) और HTML प्रतिपादन धीमा कर देती है।

— बेंजामिन क्राउजर

इसके लिए बहुत बहुत धन्यवाद! अब मैं उपयोगकर्ताओं को लोकलस्टोरेज में एक विशाल सूची दे सकता हूं, लेकिन वेबसाइट वास्तव में तेज़ महसूस करती है! लवली! : D इसके लिए बहुत-बहुत धन्यवाद! : D बहुत खुश हूँ मैं इस समाधान को पाकर खुश हूँ ^ __ ^

— Alisso

क्या होगा अगर एक ही पृष्ठ पर दो स्वत: पूर्ण बॉक्स हैं? जब मैं दोनों पर प्रतिक्रिया स्लाइस करता हूं, तो दोनों बिल्कुल स्लाइस करना बंद कर देते हैं: /

— एलिसो

इस समाधान के लिए +1। मैं minLength जोड़ूंगा: 3 और परिणाम संकीर्ण करने के लिए। jsfiddle.net/vqwBP/295

— एड्रियन पी।

2

JsFiddle में दिए गए समाधान में, स्लाइस मान को 10 से 3 तक बदलें और फिर इनपुट बॉक्स में, चरित्र C. दर्ज करें। आपको केवल 3 मान प्राप्त होंगे, जो अंतिम उपयोगकर्ता को यह विश्वास दिला सकते हैं कि वे केवल तीन मान उपलब्ध हैं। और वर्णों में प्रवेश जारी नहीं रख सकते। मेरा सुझाव है कि इस समाधान में साथ देने के लिए अच्छी मदद पाठ प्रदान करना है (उदाहरण के लिए केवल शीर्ष XX मिलान किए गए परिणाम प्रदर्शित किए जाएंगे। परिणामों को परिष्कृत करने के लिए टाइपिंग जारी रखें। "उन पंक्तियों के साथ कुछ।

— HPWD

45

आप minlengthविकल्प को कुछ बड़े मूल्य पर सेट कर सकते हैं या आप इसे इस तरह से सीएसएस द्वारा कर सकते हैं,

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}

— जयंता लाल सिरिसेना
स्रोत

प्रतिभा। मुझे इसकी सरलता बहुत पसंद है और यह उपयोगकर्ता को निर्णय लेने देता है।

— डेनिस्लेक्सिक

18

यह काफी हैकिंग है। यदि आपके पास वास्तव में लंबी सूची है, और स्वत: पूर्ण मिलान के हजारों मैच हैं, तो यह धीमी गति से होगा ...

— वाजेक हर्मेज़

1

वजक से सहमत। यह एक मापनीय दृष्टिकोण से एक खराब समाधान है।

— किसिक

4

वजक से सहमत। जब गेम JS में हो तो CSS के साथ न खेलें।

— एड्रियन पी।

मैंने अपने शब्दकोश एप्लिकेशन में यही काम किया। इसके योग्य!

— Moxet Jan

25

"जयंता" की तरह ही सीएसएस का उपयोग करना सबसे आसान तरीका होगा, लेकिन यह बेहतर हो सकता है,

.ui-autocomplete { max-height: 200px; overflow-y: scroll; overflow-x: hidden;}

ध्यान दें कि एकमात्र अंतर "अधिकतम ऊंचाई" है। यह विजेट को छोटी ऊंचाई पर आकार देने की अनुमति देगा लेकिन 200px से अधिक नहीं

— सैम बरात
स्रोत

4

अपने हल के कारण। यहां तक कि यह एक वैध है जिसे हम jQuery समाधानों के बारे में चर्चा कर रहे हैं। प्रोग्रामर को सीएसएस समाधान की पेशकश करना एक अच्छा विचार नहीं है जब समस्या को jQuery के लिए हल किया जा सकता है। और अंत में यह समस्या को हल करने वाले परिणाम नहीं है जैसे कि स्वीकृत उत्तर में। हेयर यू गो!

— एड्रियन पी।

3

@SamBattat प्रोग्रामिंग समस्या के लिए css का उपयोग करना एक भयानक हैक है। कल्पना करें कि डिबग करने की कोशिश कर रहा है!

— क्रिश्चियन पायने

19

को जोड़ना एंड्रयू जवाब है, तो आप भी कर सकते हैं परिचय एक maxResultsसंपत्ति और इसे इस तरह का उपयोग करें:

$("#auto").autocomplete({ 
    maxResults: 10,
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(src, request.term);
        response(results.slice(0, this.options.maxResults));
    }
});

jsFiddle: http://jsfiddle.net/vqwBP/877/

यह कोड पठनीयता और रखरखाव में मदद करनी चाहिए!

— रोड़ा
स्रोत

10

यहाँ वही है जो मैंने प्रयोग किया

.ui-autocomplete { max-height: 200px; overflow-y: auto; overflow-x: hidden;}

ओवरफ्लो ऑटो इसलिए स्क्रॉल बार नहीं दिखाएगा जब यह माना नहीं जाता है।

— Desto
स्रोत

5

मैं अपनी सीएसएस फ़ाइल में निम्न सामग्री जोड़कर इस समस्या को हल कर सकता हूं:

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

— सैम
स्रोत

कृपया उत्तर के रूप में "धन्यवाद" न जोड़ें। वे वास्तव में सवाल का जवाब नहीं देते हैं, और इसके भविष्य के आगंतुकों द्वारा शोर के रूप में माना जा सकता है। इसके बजाय, अपवोट आपको पसंद करता है। इस तरह से प्रश्न के भविष्य के आगंतुकों को उस उत्तर पर एक उच्च मत गणना दिखाई देगी, और उत्तर देने वाले को भी प्रतिष्ठा अंकों के साथ पुरस्कृत किया जाएगा। देखें क्यों महत्वपूर्ण मतदान है ।

— jps

यह वास्तव में मैं क्या देख रहा था! परिणामों की संख्या को सीमित नहीं किया गया है लेकिन शॉन वस्तुओं की संख्या! thx

— सर्ज इंसां

इस उत्तर का इतना कम उत्थान क्यों हुआ? क्या इसमें कुछ गड़बड़ है? मेरे लिए काम किया, कम से कम पहली नजर में।

— सज्जबी

3

यदि परिणाम mysql क्वेरी से आते हैं, तो यह सीधे mysql परिणाम को सीमित करने के लिए अधिक कुशल है:

select [...] from [...] order by [...] limit 0,10

जहां 10 पंक्तियों की अधिकतम संख्या है जो आप चाहते हैं

— the_nutria
स्रोत

1

एक DB हर माउस को क्वेरी करने के लिए अच्छा नहीं है! कुछ सर्वर या विशाल DB पर धीमा हो सकता है। वैसे, मैंने वोट नहीं दिया, लेकिन इस स्पष्टीकरण को लिखें। वोट देने के समय लोगों को क्या करना चाहिए। धन्यवाद।

— एड्रियन पी।

2

मैंने इसे निम्नलिखित तरीके से किया:

success: function (result) {
response($.map(result.d.slice(0,10), function (item) {
return {
// Mapping to Required columns (Employee Name and Employee No)
label: item.EmployeeName,
value: item.EmployeeNo
}
}
));

— एएच जमाली
स्रोत

2

jQuery आपको डिफ़ॉल्ट सेटिंग्स बदलने की अनुमति देता है जब आप किसी इनपुट में स्वत: पूर्ण संलग्न कर रहे हैं:

$('#autocomplete-form').autocomplete({
   maxHeight: 200, //you could easily change this maxHeight value
   lookup: array, //the array that has all of the autocomplete items
   onSelect: function(clicked_item){
      //whatever that has to be done when clicked on the item
   }
});

— myjeeed
स्रोत

2

प्लगइन: jquery-ui-autocomplete- स्क्रोलर और सीमा परिणामों के साथ स्क्रॉल सुंदर हैं

$('#task').autocomplete({
  maxShowItems: 5,
  source: myarray
});

— KingRider
स्रोत

2

मैंने ऊपर दिए गए सभी समाधानों की कोशिश की है, लेकिन मेरा केवल इस तरह से काम किया है:

success: function (data) {
    response($.map(data.slice (0,10), function(item) {
    return {
    value: item.nome
    };
    }));
},

— तातियाना
स्रोत

0

कोई अधिकतम पैरामीटर नहीं है।

http://docs.jquery.com/UI/Autocomplete

— dteoh
स्रोत

1

मैं इस लिंक से अधिकतम पैरामीटर देखता हूं, विकल्प मेनू के तहत docs.jquery.com/UI/Autocomplete/autocomplete

— santhosh

2

मुझे आपके लिंक पर कोई "अधिकतम" परम नहीं दिखाई दे रहा है।

— एड्रियन पी।

0

मेरे मामले में यह ठीक काम करता है:

source:function(request, response){
    var numSumResult = 0;
    response(
        $.map(tblData, function(rowData) {
            if (numSumResult < 10) {
                numSumResult ++;
                return {
                    label:          rowData.label,
                    value:          rowData.value,
                }
            }
        })
    );
},

— tlberio
स्रोत