Below please find a mod for adding an option to AutoComplete.
The option is 'afterNoMatch'. It specifies a function to call if the
value provided does not match any value in the dropdown box.
This may not be perfect, but it does get the job done.
First, how to call it:
<script type="text/javascript">
var autocompleteJSON = function(raw) {
var json = typeof(raw) === "array" ? raw : raw.resultSet;
var parsed = [];
for (var i=0; i <json.length; i++) {
var row =json[i];
parsed.push({
data: row,
value: row["orgName"] + ' [' + row["id"] + ']',
result: row["orgName"]
});
}
return parsed;
};
function afterNoMatch() {
document.forms[0].mcOrgID.value = 'nomatch';
locationDiv = document.getElementById('mcOrgLocationDiv')
locationDiv.innerHTML = "<b>Manually Entered Organization Name -
No location.</b>";
return;
}
function formatCompanyName(row) {
ret = row["orgName"] + " (id: " + row["id"] + ") " + row
["orgCity"] + ", " + row["orgState"]
document.forms[0].mcOrgID.value = row['id'];
return ret
}
</script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS
Events Effects Ajax Utilities".split(" ");
$("#mcOrgName").autocomplete('BrowseOrgsJSON.py')
.result(function(event, data, formatted) {
//alert("Got data back from server: name=" + data['orgName'] +
", id=" + data['id'] + ", city=" + data['orgCity'] + ", state=" + data
['orgState'] + ", formatted=" + formatted);
$("#mcOrgLocationDiv").html('Location: ' + data['orgCity'] +
', ' + data['orgState'] + ' (Textura Organization id: ' + data['id']
+ ')' );
document.forms[0].mcOrgID.value = data['id'];
});
$("#mcOrgName").setOptions({scrollHeight :
400 });
$("#mcOrgName").setOptions({queryArgument :
"search" });
$("#mcOrgName").setOptions({formatItem :
formatCompanyName });
// $("#mcOrgName").setOptions({autoFill :
true }); CANNOT DO THIS WITH SUBSTRING
SEARCH.
$("#mcOrgName").setOptions({mustMatch :
false });
$("#mcOrgName").setOptions({dataType :
"json" });
$("#mcOrgName").setOptions({parse :
autocompleteJSON });
$("#mcOrgName").setOptions({selectFirst :
false });
$("#mcOrgName").setOptions({extraParams : {'includeOffSystem':
'False'} });
$("#mcOrgName").setOptions({afterNoMatch :
afterNoMatch });
});
</script>
Now, here's the code. I'll start off with the diff and then cut/paste
the section the code is in case the code changes between now and the
time you're reading this.
In jquery.autocomplete.js, the function hideResultsNow() is changed to
be the following:
function hideResultsNow() {
var wasVisible = select.visible();
select.hide();
clearTimeout(timeout);
stopLoading();
if (options.mustMatch) {
// call search and run callback
$input.search(
function (result){
// if no value found, clear the input
box
if( !result ) {
if (options.multiple) {
var words =
trimWords($input.val()).slice(0, -1);
$input.val(
words.join(options.multipleSeparator) +
(words.length ? options.multipleSeparator : "") );
}
else
$input.val( "" );
}
}
);
}
else
{
// call search and run callback
$input.search(
function (result){
if( !result ) {
options.afterNoMatch();
}
}
);
}
if (wasVisible)
// position cursor at end of input field
$.Autocompleter.Selection(input, input.value.length,
input.value.length);
};
and one option is added to the options section:
...
max: 100,
mustMatch: false,
afterNoMatch: function() { return; },
extraParams: {},
selectFirst: true,
...
Now for the technical diff:
Index: resources/js/jquery/autocomplete/jquery.autocomplete.js
==============================================================
307a308,319
> else
> {
> // call search and run callback
> $input.search(
> function (result){
> if( !result ) {
> options.afterNoMatch();
> }
> }
> );
> }
>
310a323
>
403a417
> afterNoMatch: function() { return; },
