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. Take a look at this answer. — fardjad
– fardjad, Commented Mar 2, 2013 at 20:41

user1781710 · Accepted Answer · 2013-03-02 20:40:26Z

1

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

answered Mar 2, 2013 at 20:40

user1781710

Sign up to request clarification or add additional context in comments.

6 Comments

user1477388 Over a year ago

True, but I need the rest of the text to autopopulate in the textbox.

user1781710 Over a year ago

My advice would be to add the text using jQuery append() after the keyword is selected.

user1477388 Over a year ago

What do you think about the bottom of this page 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...

user1781710 Over a year ago

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.

user1477388 Over a year ago

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 · Accepted Answer · 2013-03-02 21:10:27Z

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)

Collectives™ on Stack Overflow

jQuery UI Autocomplete Partial Match

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related