jQuery यूआई स्वत: पूर्ण टेक्स्टबॉक्स में एकाधिक मान

Question

मुझे एक साधारण स्वत: पूर्ण खोज कार्यक्षमता की आवश्यकता है, लेकिन उपयोगकर्ताओं को एक से अधिक मान टाइप करने की इजाजत देता है। मैं jQuery UI के स्वत: पूर्ण विजेट (http://jqueryui.com/autocomplete/) का उपयोग कर रहा हूं और अब तक मैंने स्रोतों को केवल सुझावों में पहले अक्षर की खोज करने के लिए सेट किया है। मैं अब जो जोड़ना चाहता हूं वह उपयोगकर्ताओं को एक ही टेक्स्टबॉक्स से कई वस्तुओं की खोज करने की क्षमता है। (यानी एक अल्पविराम सुझावों के बाद फिर से दिखाए जाते हैं)

मैं यह जानने की कोशिश कर रहा हूं कि यह कैसे किया जा सकता है। एकमात्र चीज जिसे मैंने ढूंढने में कामयाब रहा है वह एक विकल्प है जिसे multiple: true (http://forum.jquery.com/topic/multiple-values-with-autocomplete) जोड़ा जा सकता है। बात यह है कि यह अब भी दस्तावेज में सूचीबद्ध नहीं है इसलिए मुझे नहीं पता कि विकल्प बदल गया है या अब अस्तित्व में नहीं है।

var items = [ 'France', 'Italy', 'Malta', 'England', 
     'Australia', 'Spain', 'Scotland' ]; 

    $(document).ready(function() { 
     $('#search').autocomplete({ 
      source: function (req, responseFn) { 
       var re = $.ui.autocomplete.escapeRegex(req.term); 
       var matcher = new RegExp('^' + re, 'i'); 
       var a = $.grep(items, function (item, index) { 
        return matcher.test(item); 
       }); 
       responseFn(a); 
      } 
     }); 
    }); 

मैं क्या करने की कोशिश की:

यह मेरा कोड है

var items = [ 'France', 'Italy', 'Malta', 'England', 
     'Australia', 'Spain', 'Scotland' ]; 

    $(document).ready(function() { 
     $('#search').autocomplete({ 
      source: function (req, responseFn) { 
       var re = $.ui.autocomplete.escapeRegex(req.term); 
       var matcher = new RegExp('^' + re, 'i'); 
       var a = $.grep(items, function (item, index) { 
        return matcher.test(item); 
       }); 
       responseFn(a); 
      }, 
      multiple: true 
     }); 
    }); 

Answer 1

SEE कई तार के मुद्दे को हल करने के लिए उसी में टेक्स्टबॉक्स और केवल स्ट्रिंग की शुरुआत से मेल खाने वाले सुझावों को दिखाने के लिए एक रेगेक्स शामिल करें:

$('#search').autocomplete({ 
     minLength: 1, 
     source: function (request, response) { 
      var term = request.term; 

      // substring of new string (only when a comma is in string) 
      if (term.indexOf(', ') > 0) { 
       var index = term.lastIndexOf(', '); 
       term = term.substring(index + 2); 
      } 

      // regex to match string entered with start of suggestion strings 
      var re = $.ui.autocomplete.escapeRegex(term); 
      var matcher = new RegExp('^' + re, 'i'); 
      var regex_validated_array = $.grep(items, function (item, index) { 
       return matcher.test(item); 
      }); 

      // pass array `regex_validated_array ` to the response and 
      // `extractLast()` which takes care of the comma separation 

      response($.ui.autocomplete.filter(regex_validated_array, 
       extractLast(term))); 
     }, 
     focus: function() { 
      return false; 
     }, 
     select: function (event, ui) { 
      var terms = split(this.value); 
      terms.pop(); 
      terms.push(ui.item.value); 
      terms.push(''); 
      this.value = terms.join(', '); 
      return false; 
     } 
    }); 

    function split(val) { 
     return val.split(/,\s*/); 
    } 

    function extractLast(term) { 
     return split(term).pop(); 
    } 

Answer 2

इस प्रयास करें:

function split(val) { 
    return val.split(/,\s*/); 
    } 

    function extractLast(term) { 
    return split(term).pop(); 
    } 

    $("#search") 
     .autocomplete({ 
      minLength: 0, 
      source: function(request, response) { 
       response($.ui.autocomplete.filter(
        items, extractLast(request.term))); 
      }, 
      focus: function() { 
       return false; 
      }, 
      select: function(event, ui) { 
       var terms = split(this.value); 
       terms.pop(); 
       terms.push(ui.item.value); 
       terms.push(""); 
       this.value = terms.join(", "); 
       return false; 
      } 
     }); 

DEMO