3

I am using the jQuery UI autocomplete and I am attempting to limit the multiple results. Basically I'm building a PM system I am using the autocomplete for the to field. But I'm trying to limit the amount of people a single message can be sent to. So like limit the max selections to 25.

Is there any way to limit this? Also any ideas on a visual indicator that they have reached the max?

 select: function( event, ui){
    var terms = split( this.value );
    if(terms.length <= 2)
    {
        // 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;
    }
    else
    {
        $(this).effect("highlight", {}, 1000);
        $(this).addClass("red");
        $("#warnings").html("<span style='color:red;'>Max people reached</span>");
        return false;
    }
}
jefffan24
  • 1,326
  • 3
  • 20
  • 35

1 Answers1

4

That can be achieved real easily by listening events. You could make the color red for example by adding class and removing class to autocomplete. I think you can accomplish this yourself with a little bit of effort.

select: function( event, ui ) {
    var terms = split( this.value );
    if(terms.length <= 2) { 
        // 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;
    } else {
        var last = terms.pop();
        $(this).val(this.value.substr(0, this.value.length - last.length - 2)); // removes text from input
        $(this).effect("highlight", {}, 1000);
        $(this).addClass("red");
        $("#warnings").html("<span style='color:red;'>Max people reached</span>");
        return false;
    }
}

P.S I also think one of these plugins could be suitable thanks to google:

  1. https://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin

    Looks nice in my opinion:

    Demo tokenizing Autocomplete Plugin

    Click link to view live demo.

  2. http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

  3. Facebook style JQuery autocomplete plugin
Community
  • 1
  • 1
Alfred
  • 60,935
  • 33
  • 147
  • 186
  • Ok so up on my original post I've added some code. Is there anyway I can remove the latest addition to the box? Like I want to keep the other names, but I want to remove the most recent one the user added. http://theproductguy.com/noblecount/noblecount.demo.html does this sort of thing when you reach the max characters allowed. – jefffan24 Jan 27 '11 at 01:02
  • can't you use `split( term ).pop()` like in the code? P.S: Maybe you could use this one, because it already has your functionality and also looks pretty(like facebook) => https://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin – Alfred Jan 27 '11 at 07:10
  • 1
    Ok I ended up using that tokenizing plugin here's what I did: I had to do some tweaking to send the list to my server so it didn't show the name twice, changed the setting to only allow 25 names, but after that it worked like a charm. Thank you for your help! I've accepted your answer and upvoted you :) – jefffan24 Jan 27 '11 at 10:23
  • @jefffan24 you had to do some bugfixing right :P. Because tokenLimit is not working by default. Could you share your changes with me :P because I was trying to achieve the same ;) – Alfred Jan 27 '11 at 10:25
  • P.S: I already had tokenLimit working, but now I am trying to remove duplicate results. – Alfred Jan 27 '11 at 10:30
  • Keyboard navigation not working when only one result is available – Alfred Jan 27 '11 at 11:02
  • That keyboard navigation was not working was my bad. I did `delete`, but I should have done `splice` to remove element from array. Now I get it working completely like I want to :) – Alfred Jan 27 '11 at 11:59
  • 1
    At line 351 change it to this: if(settings.tokenLimit != null && settings.tokenLimit <= token_count) { .....This allows you to set token limit... At line 541 I added this: query = query+"&id_list="+hidden_input.val().substring(0, hidden_input.val().length - 1) ; ....This allows me to send what is currently in the box to my php script so I can stop duplicate results on server side. I think this is about all I did in the jS file. – jefffan24 Jan 27 '11 at 22:05
  • @jefffan24 lol I was also thinking about that(541). What I did is the following => https://gist.github.com/799399. Instead of doing it one the server, I do it on the client using onResult callback. I think my queries on the server are going to be cheaper. But then again I think you solution is cleaner ;) – Alfred Jan 27 '11 at 22:19
  • Yeah I mean I also limit the results to 10 so its not having the query the whole database every time on like 3 letter queries (I don't start running the query until then). I'm using this for usernames and I know I'm going to have at least 1000 if not more, so I'm trying to make it as quick and easy on the DB as possible :) – jefffan24 Jan 28 '11 at 11:53
  • Yup when your database is stressed you could also use something like http://redistogo.com(they have a free plan => 5 MB) to cache your data in memory(fast!). I would rather just compile redis on production system, but if you can't http://redistogo.com could truly help you minimize database load. – Alfred Jan 28 '11 at 12:06