How to limit user to select only 4 values using jQuery autocomplete

Question

I am trying to select only 4 values using jquery autocomplete suggestion. after selecting 4 values they show error message you can only select 4 values.please help me how i can restrict user to tag only 4 values.

   <div class="ui-widget">
   <input type="text" id="tags">
   </div>
   <script>
   $(function() {
   var availableTags = [
  "Spanish","Chinese","Tagalog","Vietnamese","Korean","Armenian","Japanese","Persian","Russian","Arabic",
  "Italian","French","German",
  "Cherokee","Dutch","Finnish","Hebrew","Ilocano","Indian","Irish","Khmer",
  "Polish","Portuguese","Scottish Gaelic","Swedish","English","Welsh","Yiddish"
];
function split( val ) {
  return val.split( /,\s*/ );
}
function extractLast( term ) {
  return split( term ).pop();
}

$( "#tags" )
  // don't navigate away from the field on tab when selecting an item
  .bind( "keydown", function( event ) {

    if ( event.keyCode === $.ui.keyCode.TAB &&
        $( this ).autocomplete( "instance" ).menu.active ) {
      event.preventDefault();
    }
  })
  .autocomplete({
    minLength: 0,

    source: function( request, response ) {

      // delegate back to autocomplete, but extract the last term
      response( $.ui.autocomplete.filter(
        availableTags, extractLast( request.term ) ) );

    },
    focus: function() {
      // prevent value inserted on focus
      return false;
    },
    select: function( event, ui ) {
      var terms = split( this.value );
      // remove the current input
      terms.pop();
      // add the selected item
      terms.push( ui.item.value );
      // add placeholder to get the comma-and-space at the end
      terms.push( "" );
      this.value = terms.join( ", " );
      return false;
    }
  });
});

[This question has already been answered here in detail][1] [1]: http://stackoverflow.com/questions/7617373/limit-results-in-jquery-ui-autocomplete — J Spring, Aug 22 '15 at 16:28
no , i want to select only 4 values by user , after tagging 5 value we will show him error messege "you can not tag more than 4 values" — Swapnil0226, Aug 22 '15 at 16:33

Anoop B.K · Answer 1 · 2015-08-22T17:07:20.137

0

check this, it may help u. it selects only 4

$("#auto").autocomplete({ 
source: function(request, response) {
    var results = $.ui.autocomplete.filter(src, request.term);

    response(results.slice(0, 4));
}
});

<input type="text" id="auto" maxlength="4"/>

http://jsfiddle.net/vqwBP/1088/

edited Aug 22 '15 at 17:07

answered Aug 22 '15 at 16:41

Anoop B.K

1,484
2
17
31

after tagging 4 items again they give suggestion, – Swapnil0226 Aug 22 '15 at 16:50
yes and after selecting one tag they can not repeat them – Swapnil0226 Aug 22 '15 at 16:57

How to limit user to select only 4 values using jQuery autocomplete

1 Answers1