নির্বাচন 2 - অনুসন্ধান বাক্সটি লুকিয়ে রাখা iding

Question

আমার আরও উল্লেখযোগ্য নির্বাচনের জন্য, সিলেক্ট 2-এ অনুসন্ধান বাক্সটি দুর্দান্ত। তবে, একটি উদাহরণে, আমার কাছে 4 হার্ড-কোডেড পছন্দগুলির একটি সহজ নির্বাচন রয়েছে। এই ক্ষেত্রে, অনুসন্ধান বাক্সটি অতিরিক্ত অতিরিক্ত এবং এটি দেখতে কিছুটা নির্বোধ উপস্থিত রয়েছে। এটি কি কোনওভাবে লুকানো সম্ভব? আমি অনলাইনে ডকুমেন্টেশনের মাধ্যমে দেখেছি এবং এটির জন্য কনস্ট্রাক্টরের কোনও বিকল্প খুঁজে পাচ্ছি না।

আমি অবশ্যই অবশ্যই একটি নিয়মিত এইচটিএমএল নির্বাচন ব্যবহার করতে পারি, তবে ধারাবাহিকতার জন্য আমি যদি সম্ভব হয় তবে সलेक्ट 2 ব্যবহার করতে চাই।

Comments

ধারনাটির জন্য তোমাকে ধন্যবাদ। যদিও আমি jQuery এ .show () এবং .hide () সম্পর্কে জানতাম, তবে আমার কাছে এমনটি ঘটেনি যে আমি প্লাগ-ইনটি তার নিজস্ব বিকল্পগুলির বাইরে এরকম কিছু করলে চলবে। তবুও, প্রথম নজরে, এটি কাজ করে বলে মনে হচ্ছে :)

— একাদশ

গোপন পদ্ধতিটি কী করে এবং কীভাবে এটি কাজ করে তা আপনি ব্যাখ্যা করতে পারেন? আপনি কি আমাকে বলছেন এটি কেবল অনুসন্ধান বাক্সকে আড়াল করে কারণ এটি মোটেও তেমন মনে হয় না

— IcedDante

@ আইসডড্যান্ট hideপদ্ধতিটি এখানে বর্ণিত হয়েছে: api.jquery.com/hide যতক্ষণ আপনি কেবল এটি যথাযথ নির্বাচককে প্রয়োগ করেন, হ্যাঁ, এটি কেবল অনুসন্ধান বাক্সটি আড়াল করা উচিত। তবুও, প্লাগইন-নির্দিষ্ট পদ্ধতি রয়েছে যা এটি আড়াল করার জন্য নিযুক্ত করা যেতে পারে, যা আমি আপনাকে পরিবর্তে ব্যবহার করার পরামর্শ দিচ্ছি (নীচে দেখুন)।

— একাদশ

Answer 1

এই থ্রেডটি https://github.com/ivaynberg/select2/issues/489 দেখুন , আপনি সর্বনিম্ন ফলাফলগুলি অনুসন্ধান অনুসন্ধানকে নেতিবাচক মান হিসাবে সন্ধান করে অনুসন্ধান বাক্সটি আড়াল করতে পারেন।

$('select').select2({
    minimumResultsForSearch: -1
});

Comments

গিথুব টিকিটে এখানে উল্লিখিত মূল সমস্যাটি মোবাইলটিতে এটি এখনও কীবোর্ডটি প্রদর্শন করে। আমরা সিলেক্ট 2 টি বেছে নিয়ে প্রতিস্থাপন করেছি।

— টাউট করুন

এবং এটি কৌণিক-ইউআইআইআই-সিলেক্ট 2-তে পুরোপুরি অনুবাদ করে!

— rhigdon

খুব সহজ বিকল্প! আমি এটি 10 ​​এবং আরও বিকল্পগুলির অনুসন্ধান অনুসন্ধান করতে ব্যবহার করেছি। ম্যানুয়াল সন্ধানের ইনপুট সরানোর দরকার নেই।

— blazkovicz

@ কেভিনব্রাউন Infinityএকটি নেতিবাচক মান নয়। আপনার সম্পাদনাটি পাঠ্য এবং কোডটিকে মেলে না। সংযুক্ত ইস্যুটি সুনির্দিষ্টভাবে উল্লেখ করে যে একটি নেতিবাচক মান সঠিক সমর্থিত পদ্ধতির। এতে লিঙ্কিত ইস্যুটিও দাবি করে যে "সর্বনিম্ন ফলাফলের উচ্চমূল্য অনুসন্ধানের অনুসন্ধানটি কেবলমাত্র খোলা নির্বাচনের মধ্যে অনুসন্ধান বাক্সকে আড়াল করে But বর্তমান সংস্করণে এটি পুরানো সংস্করণগুলির মধ্যে একটি আসল সমস্যা হতে পারে। এই কারণে, আমি আপনার সম্পাদনাটি ফিরিয়ে আনি।

তবে, এটি অনুসন্ধানের কার্যকারিতা সম্পূর্ণ অক্ষম করে।

— সুদীপ

Answer 2

এটি তাদের উদাহরণ পৃষ্ঠায় রয়েছে: https://select2.org/searching#hiding-the- Search- box

$(".js-example-basic-hide-search").select2({
  minimumResultsForSearch: Infinity
});

Answer 3

.না-সন্ধান .পরিচয় 2-অনুসন্ধান {
    প্রদর্শন: কেউ
}

$ ( "# পরীক্ষা")। Select2 ({
    ড্রপডাউনসিএসক্লাস: 'কোনও অনুসন্ধান নয়'
}); 

Comments

+1 আমি এটি পছন্দ করি কারণ এটি এজেএক্স অনুরোধ করার সময় অনুসন্ধান বাক্সটি ইউআইতে সংক্ষেপে উপস্থিত হতে বাধা দেয়। এটি -1 হ্যাকের ক্ষেত্রেও সত্য।

— সিমোন গেটস 6:44 এ 14

এটি প্রশ্নের উত্তরস্বরূপ সেরা উত্তর কারণ এটি সত্যই ইভেন্ট ইউআই যেমন "অনুসন্ধান ...." রোধ করে।

— সারিন সুরিয়াকুন

পুরোপুরি কাজ করেছেন, আপনাকে ধন্যবাদ! যে কোনও ভবিষ্যতের গুগলারের জন্য কেবল একটি নোট, এটির জন্য সিলেক্ট 2 পূর্ণ সংস্করণ প্রয়োজন (সিলেক্ট 2.ফুল। *), যেমন এখানে বলা হয়েছে: github.com/select2/select2/issues/2879#issuecomment-149940634

— ওথিন

। $ ( "# Myselect") select2 ( "অনুসন্ধান", "search_value"): ধন্যবাদ, এটা আমি যেহেতু সার্চ বক্সে এমনকি লুকানো এটি সার্চ functionnality প্রাপ্তিসাধ্য রাখার অনুমতি দেয় যা খুঁজছেন ছিল যখন আপনি এটি প্রোগ্রামের মাধ্যমে কল করতে ইচ্ছুক এর

— নিকোলাস

প্রকৃতপক্ষে এটি সেরা বিকল্প is @ অথিন যেমনটি বলেছে যে ওয়েবসাইটটিতে নথিভুক্ত হিসাবে পুরো সংস্করণটি সিলেক্ট 2.ফুল.মিন.জেইএস প্রয়োজন: সিলেক্ট 2.github.io

— robbpriestley

Answer 4

সংস্করণ 4.0.3

আপনার জাভাস্ক্রিপ্ট কোডের সাথে ব্যবহারকারীর ইন্টারফেসের প্রয়োজনীয়তাগুলি না মেশানোর চেষ্টা করুন।

বৈশিষ্ট্যটি সহ আপনি মার্কআপে অনুসন্ধান বাক্সটি আড়াল করতে পারেন:

data-minimum-results-for-search="Infinity"

মার্কআপ

<select class="select2" data-minimum-results-for-search="Infinity"></select>

উদাহরণ

$(document).ready(function() {
  $(".select2").select2();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<label>without search box</label>
<select class="select2" data-width="100%" data-minimum-results-for-search="Infinity">
  <option>one</option>
  <option>two</option>
</select>

<label>with search box</label>
<select class="select2" data-width="100%">
  <option>one</option>
  <option>two</option>
</select>

Answer 5

JQuery এর সাথে ইনপুটগুলি সরিয়ে ফেলা আমার পক্ষে কাজ করে:

$(".select2-search, .select2-focusser").remove();

Comments

পারফেক্ট, মোবাইলে কিবোর্ড প্রদর্শিত হয় না!

— পিটার মাইরেসন

এটি পৃষ্ঠায় সমস্ত ড্রপডাউনগুলির জন্য কাজ করে তবে আমি কেবল নির্দিষ্ট ড্রপডাউনগুলিকে লক্ষ্য করতে পারি না। তারা নির্বাচিত আইডির শিশু না হওয়ায় লক্ষ্যবস্তু করা যায় না।

— শান লেবারন

নির্দিষ্ট করতে একটি মোড়ক যুক্ত করুন

— YAMM

Answer 6

এটি সর্বোত্তম সমাধান, পরিষ্কার এবং ভাল কাজ করুন:

$("#select2Id").select2 () ;
$("#select2Id").select2 ('container').find ('.select2-search').addClass ('hidden') ;

তারপরে, একটি ক্লাস তৈরি করুন .hidden { display;none; }

Comments

এটি অতীতে ভালভাবে কাজ করতে পারে তবে সিলেক্ট 2 এর সর্বশেষতম সংস্করণে কাজ করে না।

— ম্যাট ব্রাউনি 20

Answer 7

আপনি যদি কোনও নির্দিষ্ট ড্রপ ডাউন অনুসন্ধান সন্ধান করতে চান তবে তার জন্য আইডি বৈশিষ্ট্যটি ব্যবহার করুন।

$('#select_id').select2({ minimumResultsForSearch: -1 });

Answer 8

যদি নির্বাচনের ফলাফল দেখানো হয় তবে এটি ব্যবহার করতে হবে:

$('#yourSelect2ControlId').select2("close").parent().hide();

এটি অনুসন্ধান ফলাফল বাক্সটি বন্ধ করে এবং তারপরে নিয়ন্ত্রণটি অদৃশ্য সেট করে

Answer 9

নির্বাচিত বিকল্পগুলির সংখ্যার উপর নির্ভর করে আমি গতিশীলভাবে এটি করতে চাই; 10 বা তারও কম ফলাফলের সাথে বাছাইয়ের জন্য অনুসন্ধানটি গোপন করতে, আমি এটি করি:

$fewResults = $("select>option:nth-child(11)").closest("select");
$fewResults.select2();
$('select').not($fewResults).select2({ minimumResultsForSearch : -1 });

Answer 10

//Disable a search on particular selector
$(".my_selector").select2({
    placeholder: "ÁREAS(todas)",
    tags: true,
    width:'100%',
    containerCssClass: "area_disable_search_input" // I add new class 
});

//readonly prop to selector class
$(".area_disable_search_input input").prop("readonly", true);

Answer 11

//readonly on all select2 input
$(".select2-search input").prop("readonly", true);

Answer 12

আপনার বাছাইয়ে যদি আপনার একাধিক বৈশিষ্ট্য থাকে তবে এই নোংরা হ্যাকটি কাজ করে:

var multipleSelect = $('select[name="list_type"]');
multipleSelect.select2();
multipleSelect.parent().find('.select2-search--inline').remove();
multipleSelect.on('change', function(){
    multipleSelect.parent().find('.select2-search--inline').remove();
});

ডক্স এখানে দেখুন https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

Answer 13

আপনি যদি প্রাথমিক শুরুর দিকে আড়াল করতে চান এবং আপনি অজ্যাক্স কলের মাধ্যমে ড্রপডাউনটি জনপ্রিয় করছেন, তবে আপনার সিলেক্ট 2 ঘোষণায় অ্যাজাক্স ব্লকে নিম্নলিখিতটি যুক্ত করুন:

beforeSend: function () 
  {
    $('.select2-search--dropdown').addClass('hidden');
  }

আপনার এজাক্স অনুরোধটি সফল হওয়ার পরে এটি আবার দেখানোর জন্য (এবং ফোকাস করুন):

  success: function() {
      $('.select2-search--dropdown').removeClass('select2-search--hide'); // show search bar then focus
      $('.select2-search__field')[0].focus();
  }

Answer 14

আপনি এটি চেষ্টা করতে পারেন

$('#select_id').select2({ minimumResultsForSearch: -1 });

এটি অনুসন্ধান ফলাফল বাক্সটি বন্ধ করে এবং তারপরে নিয়ন্ত্রণটি অদৃশ্য সেট করে

আপনি এখানে সিলেক্ট 2 ডকুমেন্ট সিলেক্ট 2 ডকুমেন্টে চেক করতে পারেন

Answer 15

@ মিশা কোবরিনের উত্তর আমার পক্ষে ভাল কাজ করেছে তাই আমি আরও ব্যাখ্যা করার সিদ্ধান্ত নিয়েছি

আপনি অনুসন্ধান বাক্সটি আড়াল করতে চান আপনি jQuery দ্বারা এটি করতে পারেন।

উদাহরণস্বরূপ, আপনি আইডি শ্রোতা থাকার একটি ড্রপ ডাউন নির্বাচন 2 প্লাগইন শুরু করেছেন

element_select = '#audience';// id or class
$(element_select).select2("close").parent().hide();

উদাহরণটি সমস্ত ডিভাইসে কাজ করে যার উপর সিলেক্ট 2 কাজ করে।

Answer 16

উত্পন্ন ইনপুট ক্ষেত্রটি select2.min.jsসেট করতে আমি ফাইলটি সম্পাদনা করেছি ।select-2__searchreadonly="true"

Answer 17

মাল্টিসিলেটের জন্য আপনাকে জেএস কোড লিখতে হবে, কোনও সেটিংসের সম্পত্তি নেই।

$('#js-example-basic-hide-search-multi').select2();

$('#js-example-basic-hide-search-multi').on('select2:opening select2:closing', function( event ) {
    var $searchfield = $(this).parent().find('.select2-search__field');
    $searchfield.prop('disabled', true);
});

এটি তাদের পৃষ্ঠায় উল্লেখ করা হয়েছে: https://select2.org/searching#m মাল্টি- নির্বাচন করুন

Answer 18

এই সিএসএস চেষ্টা করুন

input[aria-controls=select2-product-type-results]{
  display: none;
}

এই ইনপুটটি অনুসন্ধানের ক্ষেত্র