JQuery UI স্বতঃপূরণ মধ্যে ফলাফল সীমাবদ্ধ


126

আমি jQuery UI স্বতঃসিদ্ধ ব্যবহার করছি।

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

সর্বোচ্চ প্যারামিটারটি কাজ করে না এবং আমি এখনও 10 টিরও বেশি ফলাফল পেয়েছি। আমি কিছু অনুপস্থিত করছি?


11
কোন বিকল্প বলা হয় maxস্বয়ংসম্পূর্ণ মধ্যে
Jayantha লাল সিরিসেনা

উত্তর:


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/andrew whitaker / vqwBP/


7
একটি যাদুমন্ত্র মত কাজ করে. এটি যদি খুব কার্যকর হয় যদি আপনার স্বতঃপূরণ তালিকাটি দীর্ঘ হয় (~ 10 কে ফলাফল) এবং এইচটিএমএল রেন্ডারিংকে ধীর করে দেয়।
বেনজামিন ক্রাউজিয়ার

এর জন্য আপনাকে অনেক ধন্যবাদ! এখন আমি লোকালস্টোরারে ব্যবহারকারীদের একটি বিশাল তালিকা পেতে দিতে পারি, তবে ওয়েবসাইটটি সত্যিই দ্রুত বোধ করে! বাহ! : ডি এর জন্য আপনাকে অনেক ধন্যবাদ! : ডি খুব খুশি আমি এই সমাধানটি খুঁজে পেয়ে খুশি ^ __ ^
অ্যালিসো

যদি একই পাতায় দুটি স্বতঃপূণ বাক্স থাকে? আমি যখন উভয়টিতে প্রতিক্রিয়াটি স্লাইস করি, তখন দুজনেই
মোটামুটি কাটা

এই সমাধানের জন্য +1। আরও ফলাফল সংকুচিত করতে আমি minLength: 3 যুক্ত করব। jsfiddle.net/vqwBP/295
অ্যাড্রিয়ান পি।

2
প্রদত্ত সমাধানটি jsFizz এ, স্লাইস মানটি 10 ​​থেকে 3 থেকে পরিবর্তন করে ইনপুট বাক্সে, সি অক্ষরটি প্রবেশ করান আপনি কেবলমাত্র 3 টি মান পাবেন যা শেষ ব্যবহারকারীকে বিশ্বাস করতে পারে যে কেবলমাত্র তিনটি মান উপলব্ধ এবং অক্ষর প্রবেশ করা চালিয়ে যেতে পারে না। সকল এটাই বলতে চাচ্ছি এই সমাধান সংসর্গে (যেমন কেবলমাত্র এক্সএক্স ফলাফলের সাথে মেলে যা প্রদর্শিত হবে ভাল সহায়তা পাঠ্য প্রদান যারা লাইন বরাবর কিছু টাইপিং চালিয়ে ফলাফল পরিমার্জন "।।।
HPWD

45

আপনি minlengthবিকল্পটি কিছু বড় মানেরতে সেট করতে পারেন বা আপনি এটি CSS এর মাধ্যমে করতে পারেন,

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

জিনিয়াস। আমি এর সরলতা পছন্দ করি এবং এটি ব্যবহারকারীকে সিদ্ধান্ত নিতে দেয়।
অস্বীকৃত

18
এটি বেশ হ্যাকি। আপনার যদি সত্যিই দীর্ঘ তালিকা থাকে এবং
স্বয়ত্ত্বসীমা

1
ভজকের সাথে একমত এটি একটি স্কেলাবিলিটি দৃষ্টিকোণ থেকে একটি দুর্বল সমাধান।
কিক্সি

4
ভজকের সাথে একমত গেমটি জেএসে থাকা অবস্থায় সিএসএসের সাথে খেলবেন না।
অ্যাড্রিয়ান পি।

আমি আমার অভিধান অ্যাপ্লিকেশন একই কাজ। এটি যোগ্য!
Moxet জানুয়ারী

25

"জয়ন্ত" এর মতোই বলেছেন যে সিএসএস ব্যবহার করা সবচেয়ে সহজ পদ্ধিতি হবে তবে এটি আরও ভাল হতে পারে,

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

পার্থক্যটি কেবলমাত্র "সর্বোচ্চ-উচ্চতা" নোট করুন। এটি উইজেটটিকে ছোট উচ্চতায় পুনরায় আকার দিতে দেবে তবে 200px এর বেশি নয়


4
কারণ আপনার সমাধান। এমনকি এটি একটি বৈধ যা আমরা jQuery সমাধানগুলি নিয়ে আলোচনা করছি। কোনও প্রোগ্রামারকে সিএসএস সলিউশন অফার করা যখন সমস্যাটি jQuery এ সমাধান করা যায় তবে ভাল ধারণা নয়। এবং শেষ পর্যন্ত এটি কেবল ফলাফলগুলি মুখোশযুক্ত হিসাবে গৃহীত উত্তর হিসাবে সমস্যাটি সমাধান করছে না। এই যে!
অ্যাড্রিয়ান পি।

3
@ সামব্যাটাত একটি প্রোগ্রামিং সমস্যার জন্য সিএসএস ব্যবহার করা একটি ভয়ঙ্কর হ্যাক। ভাবুন যে ডিবাগ করার চেষ্টা করছেন!
খ্রিস্টান পায়েেন

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

ওভারফ্লো অটো যাতে স্ক্রোল বারটি যখন না করা হয় তখন দেখাবে না।


5

আমি আমার সিএসএস ফাইলে নিম্নলিখিত বিষয়বস্তু যুক্ত করে এই সমস্যাটি সমাধান করতে পারলাম:

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

উত্তর হিসাবে "ধন্যবাদ" যোগ করবেন না দয়া করে। এগুলি আসলে প্রশ্নের উত্তর দেয় না এবং এটি ভবিষ্যতের দর্শকদের দ্বারা শব্দ হিসাবে ধরা যেতে পারে। পরিবর্তে, upvote আপনার পছন্দ মত উত্তর। এইভাবে প্রশ্নের ভবিষ্যতের দর্শকরা এই উত্তরের উপর একটি উচ্চ ভোটের সংখ্যা দেখতে পাবেন এবং উত্তরদাতাকে খ্যাতি পয়েন্টের সাথেও পুরস্কৃত করা হবে। ভোট কেন গুরুত্বপূর্ণ তা দেখুন ।
জেপিএস

এই ঠিক আমি যা খুঁজছিলাম ছিল! ফলাফলের সংখ্যা সীমাবদ্ধ না করে শন আইটেমের সংখ্যা! thx
সার্জ ইনসাস

কেন এই উত্তর এত সামান্য upvotes আছে? এটা দিয়ে কিছু ভুল আছে? আমার জন্য কাজ করেছেন, কমপক্ষে প্রথম দর্শনে।
সিজবকি

3

যদি ফলাফলগুলি কোনও মাইএসকিএল কোয়েরি থেকে আসে তবে সরাসরি মাইএসকিএল ফলাফল সীমাবদ্ধ করা আরও দক্ষ:

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

যেখানে 10 টি সারিগুলির সর্বাধিক সংখ্যা


1
প্রতিটি মাউস আপ একটি ডিবি জিজ্ঞাসা করা ভাল নয়! কিছু সার্ভার বা বিশাল ডিবিতে ধীর হতে পারে। যাইহোক, আমি ভোট দিয়েছি না তবে এই ব্যাখ্যাটি লিখেছি। ভোট দেওয়ার পরে লোকেরা কী করবে। ধন্যবাদ।
অ্যাড্রিয়ান পি।

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


2

আমি উপরের সমস্ত সমাধান চেষ্টা করেছি, তবে আমার কেবল এই পথেই কাজ করেছি:

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

0

কোনও সর্বোচ্চ পরামিতি নেই।

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


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,
                }
            }
        })
    );
},
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.