I have a Textbox that utilizes an Ajax Autocomplete function.
The function is functioning correctly and retrieves values from the database, populating them in the TextBox as well.
However, there is a button on the page that triggers a query, fetching some value to display in a Label. This query uses the selected autocomplete value.
During debugging, I discovered that the value of the TextBox was null, causing issues. It seems that even though the value is populated in the TextBox, it is not being set properly.
Below is my code for AJAX:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
SearchText();
});
function SearchText() {
$("#txtSearchDir").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "SearchPage.aspx/autoTagSearch",
data: "{'tagName':'" + document.getElementById('txtSearchDir').value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
autoFocus: true
},
error: function (result) {
document.getElementById('txtSearchDir').value = "";
},
});
}
});
}