I have been working with the autocomplete library and have the
autocompletion working reasonably well. However, my problem comes when
I want to take the form populated with the results of the user's
selections and then post it to my server side script for final
results. This does not work -- I found other examples that seem to
work, but I don't seem to be able to get my scripts to work the same
way.
I am using this within a .net control:
<script type="text/javascript">
function findValueCallback(event, data, formatted) {
$("<li>").html( !data ? "No match!" : "Selected: " +
formatted).appendTo("#result");
}
function formatItem(row) {return row[0] + " (<strong>id: " + row[1] +
"</strong>";}
function formatResult(row) {return row[0].replace(/(<.+?>)/gi, '');}
function formatPlantName(row) {
return "<div style=\"float:right;width:190px;\">" + row[0]
+ "<br /><em>" + row[1] + "</em></div style=\"float:left;width:50px;
\"><div><img src=\"/images/plants/th/" + row[2] + "\" /></div>";
}
$().ready(function() {
$("#plantsuggest_txt").autocomplete("/PlantSuggestor.ashx", {
delay: 200,
width: 260,
minChars: 0,
selectFirst: true,
formatItem: formatPlantName
})
.result(function(event, data, formatted) {
if (data) $("#plantname").attr('value',data[0]);
});
});
function showPlants() {$
("#plantsuggest_txt").focus().click().click();}
/** Set auto-complete 'Off' on Search Input field **/
jQuery(function() {
//Setting the autocomplete attr
$("#plantsuggest_txt").attr("autocomplete", "off");
});
</script>
<form id="PlantSuggestForm" method="get" >
<div class="plantsuggestor">
<h4>Plant Compatibility</h4>
<div>
<label for="plantsuggest_txt">Select or type plant name</
label>
<br /><input id="plantsuggest_txt" class="ac_input"
type="text" /><a href="#" onclick="showPlants();return false;">show
all</a><input type="hidden" id="plantname" value="" />
<br /><input id="plantsubmit" class="searchBtnOK"
type="submit" value=" Find Products "/>
<input type="image" src="/images/b/find-products.png"
name="image" alt=" Find products" />
<asp:Literal ID="YouTyped" runat="server"></asp:Literal>
</div>
</div>
</form>
If I try using the image button, I see in my url that it passes the .x
and .y values, but other form values are not submitted. I have checked
using Firebug and the trace.axd for form and querystring variables,
but they do not get passed to the server.