jQuery UI Autocomplete Partial Match

Question

I am trying to make the jQuery UI Autocomplete search only the first few letters of my strings. I thought I could do a key/ value thing with jQuery UI, but I am not sure if that applies.

I have the following string:

AGREE Agreement by and between BLANK, in BLANK, of the county records.

Only AGREE should be searched, not the rest of the string. AGREE is the text-code that the user will search for.

Here is my simple code:

var availableTags = [
            "AGREE Agreement by and between BLANK, in BLANK, of the county records.",
            "CONDO Covenants, conditions, restrictions, reservations, terms, provisions, easements, liens for assessments, options, powers of attorney and limitations on title as set forth in the Ohio Revised Code Chapter 5311, or as set forth in the Declaration of Condominium ownership and Bylaws as recorded in BLANK, as amended, plat BLANK, of the county records."
        ];

$( "#tags" ).autocomplete({
 source: availableTags
});

Only the first words AGREE and CONDO should be searched, not the rest of the strings. Is this possible/ feasible?

Possible duplicate of [jQuery UI Autocomplete widget search configuration](http://stackoverflow.com/questions/2382497/jquery-ui-autocomplete-widget-search-configuration). Take a look at [this](http://stackoverflow.com/a/2405109/303270) answer. — fardjad, Mar 02 '13 at 20:41

score 1 · Answer 1 · answered Mar 02 '13 at 20:40

1

If you're only searching for the tags then why don't you just put the tags in the array?

answered Mar 02 '13 at 20:40

Phillip Berger

2,317
1
11
30

True, but I need the rest of the text to autopopulate in the textbox. – user1477388 Mar 02 '13 at 20:41
1

My advice would be to add the text using jQuery `append()` after the keyword is selected. – Phillip Berger Mar 02 '13 at 20:45
What do you think about the bottom of this page http://api.jqueryui.com/autocomplete/#event-search where it says, "**Demo: Example: Using a custom source callback to match only the beginning of terms**" Do you think I could use that? It sounds like what I want to do... – user1477388 Mar 02 '13 at 20:46
1

Could work. Or you can use a `keyup` event and check with an if statement for a specific value or values in that text box and `append()` additional text based in that. – Phillip Berger Mar 02 '13 at 20:50
Thanks for your answer. It was very helpful, but I think I will go with the method on that page I linked to above. I posted my solution below. – user1477388 Mar 02 '13 at 21:05
Just glad you got it figured out. Mark your own solution as the answer ok. – Phillip Berger Mar 02 '13 at 21:07

user1477388 · Accepted Answer · 2013-03-02T21:10:27.987

My solution was this:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
<script>
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
$( "#autocomplete" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags, function( item ){
return matcher.test( item );
}) );
}
});
</script>
</body>
</html>

Ref. http://api.jqueryui.com/autocomplete/#event-search (bottom of the page)

jQuery UI Autocomplete Partial Match

2 Answers2

Linked