CODEWITHSUNDEEP
jqueryjquery-uiautocomplete
NCoder
NCoder

Reputation: 335

jQuery Auto-Fill stop inside search

I've got the jQuery autofill script working to populate my text box as the user types to recomend results.

$( "#tags" ).autocomplete({
source: availableTags,
open: function(event, ui) {
        $(".ui-autocomplete").css({
            'width' :   '600px'
        });
     }
});
});

What I need it to do is stop searching inside of the options and just search from the first letter.

For instance if an option is "Blue" and the user types "Bl" then "Blue" should populate like it does, but I don't want the user to type in "ue" and have "Blue" appear as an option.

EDIT: based on the post below I'm trying this script but it doesn't seem to work:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Real Autocomplete</title>

<!-- jQuery UI  |  http://jquery.com/  http://jqueryui.com/  http://jqueryui.com/docs/Theming  -->
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];
$( "#tags" ).autocomplete({
  source: function( request, response ) {
    var matches = $.map( availableTags, function(tag) {
      if ( tag.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
        return tag;
      }
    });
    response(matches);
  }
});

</script>
</head>
<body>

  <label for="tags">Tags: </label>
  <input id="tags">

</body>
</html>

Upvotes: 0

Views: 129

Answers (1)

Dsel
Dsel

Reputation: 1037

Check out this link on Jquery's forum: https://forum.jquery.com/topic/select-only-items-that-start-with-jquery-ui-autocomplete

one of the posters in that link provided this as an example: http://jsbin.com/avoyu5/1/edit

If you type "sc" you will see that it works exactly how you want (it will not show you "javascript" but it will show you "scala")

Upvotes: 2

Related Questions