টুইটার বুটস্ট্র্যাপ নোকআউটজ সহ স্বয়ংক্রিয়রূপে ড্রপডাউন / কম্বোবক্স


114

আমার একটি আবশ্যকতা রয়েছে যেখানে আমার বুটস্ট্র্যাপ স্বতঃপূরণ ড্রপডাউন ব্যবহার করতে হবে, তবে তারা চাইলে ব্যবহারকারীরা সেই ড্রপডাউনটিতে ফর্ম ফর্ম পাঠ্য থাকতে পারে। আপনি টাইপএডের কথা ভাবার আগে, আমি বুটস্ট্র্যাপ টাইপহেড পাঠ্যবক্স ব্যবহার করতে পারতাম, তবে ব্যবহারকারীরা কী সন্ধান করবেন তা জানেন না, এমন ক্ষেত্রে হেডস্টার্ট বিকল্প হিসাবে আমাদের কিছু ডিফল্ট মান দিতে চাইলে ড্রপডাউন হওয়া দরকার।

আমি এটি এমভিসি ড্রপডাউনলিস্টের সাথে ব্যবহার করছি কারণ এটি আমাদের জন্য একটি নির্বাচন নিয়ন্ত্রণ তৈরি করে।

আমি এই নিবন্ধটি পেয়েছি যা আমার জন্য এটি করে।

https://github.com/danielfarrell/bootstrap-combobox/pull/20

আমাকে যা করতে হয়েছিল তা হল নির্বাচন নিয়ন্ত্রণ থেকে নামটি সরিয়ে ফেলতে হয়েছিল এবং নিয়ন্ত্রণটি আমাকে ফর্ম ফর্মের লেখায় প্রবেশ করতে দিচ্ছিল। এখন পর্যন্ত সব ভাল।

এখন, আমি এটি নকআউটজেসের সাথে একযোগে ব্যবহার করছি। আমি আমার বিকল্পগুলি এবং নির্বাচিত মানটিকে নির্বাচিত নিয়ন্ত্রণের সাথে আবদ্ধ করি এবং তারপরে আমার টেম্পলেটটির সারি সারি করে, আমি (নির্বাচক) .কম্বোবক্স () কল করি যা নির্বাচিত নিয়ন্ত্রণকে একটি বুটস্ট্র্যাপ কমোবোবক্স তৈরি করে এবং একটি ইনপুট নিয়ন্ত্রণ যুক্ত করে এবং দৃশ্যে নির্বাচিত নিয়ন্ত্রণটি লুকিয়ে রাখে পিছনে।

এখন সমস্যাটি যখন আমি তাকে সার্ভারে পোস্ট করার জন্য মূল্য দেওয়ার চেষ্টা করি, যেহেতু আমি ইনপুট বাক্সে রেখেছি মানটি নির্বাচন করতে যে বিকল্পগুলি দিয়েছিল সেগুলি থেকে কোনও বৈধ বিকল্প নয়, এটি সর্বদা ডিফল্টরূপে এটি প্রথম বিকল্পে সেট করে। এটি হ'ল, আমি নির্বাচিত মানটির বাইন্ডিংটি নির্বাচন নিয়ন্ত্রণে সেট করেছিলাম এবং বুটস্ট্র্যাপ-কম্বোবক্স.জেএস দ্বারা নির্মিত ইনপুট বাক্সে নয়।

আমার প্রশ্নটি হল নির্বাচনী নির্বাচনটি যেমন বাধ্যতামূলক ছিল তেমনিভাবে আমি কীভাবে ইনপুট বাক্সটিকে একই পার্পেরটির সাথে ডেটা-বাইন্ডে পাই?

অন্য কোন বিকল্প ?? আপনার আরও স্পষ্টতা প্রয়োজন হলে বা প্রশ্ন থাকলে আমাকে জানান। সুপারিশ করুন.

ধন্যবাদ।


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

উত্তর:


254

বুটস্ট্র্যাপের জন্য সিলেক্ট 2একবার দেখুন । এটি আপনার প্রয়োজনীয় সমস্ত কিছু করতে সক্ষম হবে।

আর একটি ভাল বিকল্প হ'ল Selectize.js । এটি বুটস্ট্র্যাপে কিছুটা বেশি নেটিভ অনুভব করে।


27
আপনি ইতিমধ্যে ডেটাসোর্সে অন্তর্ভুক্ত ছিল না এমন পাঠ্য ইনপুটটিকে অনুমতি দেওয়ার জন্য কীভাবে নির্বাচন 2 ব্যবহার করেছেন?
কনসেন্ট্রাল

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

2
কি ভাল সন্ধান! আমি সেলটিটিজ ব্যবহার শেষ করেছি কারণ এটি আরও বুটস্ট্র্যাপ-এস্কো মনে হয়।
স্টিভেন

1
@ কমপেন্দ্রাল এবং স্টাস দ্বারা চিহ্নিত ইস্যুটির কারণে, আমি selectize.js নিয়ে যেতে বেছে নিয়েছি।
নিল মনরো

1
@ কমপেনস্রাল কেন আপনি রিমোট ডেটা সোর্স পদ্ধতিটি ব্যবহার করেন না?
ক্লেইন ডিসিলভা

23

বেসিক এইচটিএমএল 5 ডেটালিস্ট কাজ করে? এটি পরিষ্কার এবং আপনার অগোছালো তৃতীয় পক্ষের কোডটি নিয়ে খেলতে হবে না। W3SCHOOL টিউটোরিয়াল

MDN ডকুমেন্টেশন খুব বলিয়ে এবং উদাহরণ বৈশিষ্ট্যগুলিও উপস্থিত রয়েছে।


3
এইচটিএমএল 5 এর সাথে বড় সমস্যাটি datalistহ'ল এটি কোনও ডিওএম ইভেন্ট সমর্থন করে না। সুতরাং আপনি যখনই কোনও মান নির্বাচন করেন, আপনাকে সংশ্লিষ্ট পাঠ্যবক্সের বাইরে ট্যাব করতে হবে
পাভন

@ পাওয়ান এটি সত্য নয় (আর?)। ডেটালিস্ট ফায়ারের সাথে যুক্ত ইনপুটটি অন্ততপক্ষে ইভেন্টগুলি পরিবর্তন করে এবং ইনপুট দেয়। দেখুন এখানে , উভয় পরিবর্তন এবং ইনপুট ইভেন্টগুলি একটি কনসোল লগ আগুন।
ফলিক্স গাগনন-গ্রেনিয়ার

1
এই সমস্ত বছর। এই সমস্ত বছর সাধারণ এবং পরিষ্কার ইতিমধ্যে সমর্থিত সমাধানের পরিবর্তে তৃতীয় পক্ষের লাইব্রেরিগুলির সাথে ঘোরাঘুরি ...
ফলিক্স গাগনন-গ্রেনিয়ার

3

বুটস্ট্র্যাপ 3 নেটিভ প্লাগইন জন্য সিলেক্ট 2

https://fk.github.io/select2-bootstrap-css/index.html

এই প্লাগইন নির্বাচন 2 jquery প্লাগইন ব্যবহার করে

nuget

প্রধানমন্ত্রী> ইনস্টল-প্যাকেজ নির্বাচন 2-বুটস্ট্র্যাপ


1
হ্যালো. এখানে প্রথম upvated উত্তরের সাথে কি পার্থক্য আছে? আপনি যতদূর আমি দেখতে পাচ্ছি নির্বাচনের 2 টি পরামর্শটি সদৃশ করব?
ফলিক্স গ্যাগন-গ্রেনিয়ার


1

আমি কি http://www.jqueryscript.net/for/Twitter-Like-Mentions-Auto-Suggesting- প্লাগইন-উইথ- jQuery- বুটস্ট্র্যাপ- সাগস্ট html, টুইটার পোস্ট পরামর্শের মতো আরও কাজ করতে পারি যেখানে এটি আপনাকে একটি তালিকা দেয় ব্যবহারকারী বা বিষয়গুলি @ বা # ট্যাগের উপর ভিত্তি করে,

ডেমোটি এখানে দেখুন: http://www.jqueryscript.net/demo/Twitter-Like-Mentions- অটো- সাজেস্টিং- প্লাগইন- সাথে- jQuery- বুটস্ট্র্যাপ- সাজেস্ট /

এটিতে আপনি সহজেই @ এবং # আপনার যে কোনও কিছুতে পরিবর্তন করতে পারেন


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