-->

jQuery UI Autocomplete Partial Match

2019-09-16 02:45发布

问题:

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?

回答1:

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



回答2:

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)