Question

Tokenizer:

http://loopj.com/jquery-tokeninput/

shows a hint “Type in search term” when the user focuses on the input. Is it possible to do this with jQuery UI’s autocomplete? http://jqueryui.com/demos/autocomplete/

I’m using a remote source for my data, but I’m thinking maybe assign a temporary source of length 1 ([“Type in search term”, “”]) to autocomplete until a search is initiated?

Answer 1

Is this what you are looking for: Update demo http://jsfiddle.net/vWJdT/ *older => * Working demo http://jsfiddle.net/MQfEL/

I reckon what you are looking for is this: http://loopj.com/jquery-tokeninput/

Hope it fits your cause :)

Script

  <script type='text/javascript' src="https://raw.github.com/loopj/jquery-tokeninput/master/src/jquery.tokeninput.js"></script>



  <link rel="stylesheet" type="text/css" href="http://loopj.com/jquery-tokeninput/styles/token-input.css">




  <link rel="stylesheet" type="text/css" href="http://loopj.com/jquery-tokeninput/styles/token-input-facebook.css">

Code

  $(document).ready(function() {
            $("#demo-input-local-custom-formatters").tokenInput([{
                "first_name": "Tats_innit",
                "last_name": "Godfrey",
                "email": "[e-mail]",
                "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
            },
            {
                "first_name": "Andre",
                "last_name": "Jackson",
                "email": "[e-mail]",
                "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
            },
            {
                "first_name": "Andre",
                "last_name": "Jolly",
                "email": "[e-mail]",
                "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
            },
            {
                "first_name": "Andre",
                "last_name": "Henderson",
                "email": "[e-mail]",
                "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
            }
          ], {
              propertyToSearch: "first_name",
              resultsFormatter: function(item){ return "<li>" + "<img src='" + item.url + "' title='" + item.first_name + " " + item.last_name + "' height='25px' width='25px' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name'>" + item.first_name + " " + item.last_name + "</div><div class='email'>" + item.email + "</div></div></li>" },
              tokenFormatter: function(item) { return "<li><p>" + item.first_name + " <b style='color: red'>" + item.last_name + "</b></p></li>" },
          });
        });​

working image

by the way i ain’t godfrey.