How to identify if the submitted value came from the autocomplete script?
In my form there is a textbox and submit button. When a user starts typing, after the 3rd letter the autocomplete script does it's magic.
There are two possibilities.
- The user types a word, there are matches and he clicks on one match. This selected match is added to the textbox and then hits the submit button.
- The user types a word, there/there are not matches but he decides to hit the submit button without selecting one of the suggested.
My question is how can I identify whether he hit the button in case 1 or in case 2.
rpc.php is the file that looks for suggested values through the mySQL.
A solution is to check the string if there is on the database but I do not want this.
Another solution is to transform the jQuery script and php code that shows the product name and instead of putting the product in the textbox, it should take him to the results page. This solves my problem also.
<script type="text/javascript">
$().ready(function() {
$("#s").autocomplete("rpc.php", {
width: 250,
selectFirst: false,
minChars: 3,
scroll:true,
matchContains: true,
scrollHeight: 250
});
});
</script>
<form method="get" action=".php">
<input type="text" name="s" id="s" class="inputsearch">
<input type="submit">
</form>
Use autocomplete's change
method to set a flag in the form, eg
/// Create an hidden element to store the flag value,
/// 1 for AC used, 0 for user entered
var flag = $("<input>").attr("type", "hidden")
.attr("name", "ac_flag")
.val(0);
// append flag to form
$("form").append(flag);
$("#s").autocomplete("rpc.php", {
change: function(event, ui) {
flag.val(ui.item != null ? 1 : 0);
},
// and the rest
});
The "change" event fires when the value in the text field changes. When an AC item is chosen ui.item
will contain an object reference to the selected item from the list. If no selection was made, ie the user simply entered text, ui.item
will be null.
Your form handler can then check for $_GET['ac_flag']
to determine whether or not the value came from the autocomplete list.
Quick mockup example here - http://jsfiddle.net/9GQgh/
The simplest approach would be to modify the autocomplete
plugin itself to set a flag when the user chooses a value from it, and clear it when the user modifies their selection. The flag could be anywhere, but for the sake of simplicity I'd suggest a hidden form field, like:
<form method="get" action=".php">
<input type="text" name="s" id="s" class="inputsearch">
<input type="hidden" id="flag" name="inputCameFromAutocomplete" value="false">
<input type="submit">
</form>
So in the autocomplete
plugin, when the user makes a selection, you could add something like:
$("#flag").val("true");
If you wanted to you could make the id/selector of the flag element part of the plugin config/options so that it is more reusable.
You would also want to do something like:
$("#s").keypress(function() {
$("#flag").val("false");
});
...as part of your initial setup, so that the flag is reset whenever the user manually types something into the field.
精彩评论