2017-03-23 25 views
6

मैंने अपनी साइट के लिए टैग/स्वत: पूर्ण करने को एकीकृत करने का प्रयास किया है। यह विकल्प पाठ के माध्यम से काम कर रहा है। मैं परिणाम के करीब हूं लेकिन अभी भी लटक रहा हूं।विकल्प 2 द्वारा चयन 2 स्वत: पूर्ण

अब जब आप विकल्प टेक्स्ट चुनने का प्रयास करते हैं तो संबंधित टेक्स्ट दिखाई देगा। लेकिन अब मैं विकल्प मूल्य के माध्यम से काठमांडू या संबंधित विकल्प टेक्स्ट खोजना चाहता हूं।

पूर्व: जब हम खोज मूल्य A001काठमांडू दिखाई देगा और A002 रूप में एक ही चयन यह पोखरा दिखाई देगी

$("select").select2({ 
 
    tags: "true", 
 
    placeholder: "Select an option", 
 
    allowClear: true, 
 
    width: '100%', 
 
    createTag: function (params) { 
 
    var term = $.trim(params.term); 
 

 
    if (term === '') { 
 
     return null; 
 
    } 
 

 
    return { 
 
    id: term, 
 
    text: term, 
 
    value: true // add additional parameters 
 
    } 
 
    } 
 
});
.select2-container { 
 
    max-width: 400px; 
 
}
<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> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 
<select class="custom-select" multiple="multiple"> 
 
    <option value="a001">Kathmandu</option> 
 
    <option value="a002">Pokhara</option> 
 
    <option value="a003">Lalitpur</option> 
 
</select>

मुझे लगता है कि मैं कर रहा हूँ जाएगा मूल्य के माध्यम से खोज के बाद बंद करें और उस पर क्लिक करें यह आईडी के साथ प्रासंगिक विकल्प दिखाएगा। लेकिन मुझे केवल विकल्प टेक्स्ट पोखराकाठमांडू चुनिंदा क्षेत्र पर एक आईडी नहीं चाहिए।

उत्तर

6

जब बस Id जांच में प्रवेश के लिए कि क्या प्रवेश किया अवधि एक मौजूदा Id से मेल खाता दिखा Id और Text की दोहरी-अप को निकालने के लिए, और अगर यह बस मिलान विकल्प की Text वापसी करता है:

options = []; 
 

 
// create an array of select options for a lookup 
 
$('.custom-select option').each(function(idx) { 
 
    options.push({id: $(this).val(), text: $(this).text()}); 
 
}); 
 

 

 
$("select").select2({ 
 
    tags: "true", 
 
    placeholder: "Select an option", 
 
    allowClear: true, 
 
    width: '100%', 
 
    createTag: function (params) { 
 
    var term = $.trim(params.term); 
 

 
    if (term === '') { 
 
     return null; 
 
    } 
 
    
 
    // check whether the term matches an id 
 
    var search = $.grep(options, function(n, i) { 
 
     return (n.id === term || n.text === term); // check against id and text 
 
    }); 
 
    
 
    // if a match is found replace the term with the options' text 
 
    if (search.length) 
 
     term = search[0].text; 
 
    else 
 
     return null; // didn't match id or text value so don't add it to selection 
 
    
 
    return { 
 
    id: term, 
 
    text: term, 
 
    value: true // add additional parameters 
 
    } 
 
    } 
 
}); 
 

 
$('select').on('select2:select', function (evt) { 
 
    //console.log(evt); 
 
    //return false; 
 
});
.select2-container { 
 
    max-width: 400px; 
 
}
<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> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 
<select class="custom-select" multiple="multiple"> 
 
    <option value="a001">Kathmandu</option> 
 
    <option value="a002">Pokhara</option> 
 
    <option value="a003">Lalitpur</option> 
 
</select>

+0

धन्यवाद बहुत दोस्त। यदि सूची के अलावा विकल्प चुनने के लिए अक्षम है तो मैं सराहना करता हूं। अब यह आईडी के माध्यम से काम कर रहा है। अब हम इस टैग को चुनने से बच सकते हैं http://prntscr.com/ept0yg – Kumar

+0

ठीक है, यह आसान होना चाहिए, यह मेल नहीं खाता है जब यह 'शून्य' लौटने की बात है। मैं कोड अपडेट करूंगा ... –

+0

धन्यवाद दोस्त ....इसका काम एक बार फिर बहुत धन्यवाद – Kumar

1

यदि आप a001 खोजते हैं तो आउटपुट आउटपुट में आईडी और टेक्स्ट प्रदर्शित होता है। placeholder जानें।

यदि मान एक वस्तु है, तो ऑब्जेक्ट चयन 2 की आंतरिक वस्तुओं के साथ संगत होना चाहिए। IDयह निर्धारित करने के लिए आईडी होना चाहिए कि प्लेसहोल्डर को प्रदर्शित किया जाना चाहिए या नहीं। पाठ को प्लेसहोल्डर को प्रदर्शित करने के लिए उस विकल्प को चुनने के लिए होना चाहिए।

उदाहरण: खोज a001 के बाद प्रदर्शन में प्रवेश काठमांडू और A001 पाठ बॉक्स

placeholderका उपयोग करने में Select2

placeholder: { 
     id: "-1", 
     text: "Select an option", 
     } 

$("select").select2({ 
 
    tags: "true", 
 
    placeholder: { 
 
    id: "-1", 
 
    text: "Select an option", 
 
    }, 
 
    allowClear: true, 
 
    width: '100%', 
 
    createTag: function(params) { 
 
    var term = $.trim(params.term); 
 

 
    if (term === '') { 
 
     return null; 
 
    } 
 

 
    return { 
 
     id: term, 
 
     text: term, 
 
     value: true // add additional parameters 
 
    } 
 
    } 
 
});
.select2-container { 
 
    max-width: 400px; 
 
}
<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> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
<select class="custom-select" multiple="multiple"> 
 
    <option value="a001">Kathmandu</option> 
 
    <option value="a002">Pokhara</option> 
 
    <option value="a003">Lalitpur</option> 
 
</select>
में

+0

हाँ, लेकिन मैं मैदान पर A001 जरूरत नहीं है। बस काठमांडू या ललितपुर प्रदर्शित करें। अब मूल्य और पाठ दोनों दिखा रहा है – Kumar

संबंधित मुद्दे