I want to show filtered data as an autocomplete input according the selected by userId in an input field. I have userId, data fields in database table. In the page, when user enters a data to an input field I want to show only this user’s data fields as an autocomplete field. How can I do this. I hope I clarified the problem.
The following code works without filtering:
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="AutoCompleteParameterTextBox.ascx.cs" Inherits="AutoCompleteParameterTextBox" %>
<script type="text/javascript">
jQuery(function ($) {
try {
if ($('script[src="/Assets/js/jquery-ui-1.10.4.custom.min.js"]').length == 0) {
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "/Assets/js/jquery-ui-1.10.4.custom.min.js";
$("body").append(s);
}
if ($('link[href="/Assets/css/jquery-ui.min.css"]').length == 0) {
$("head").append('<link rel="stylesheet" href="/Assets/css/jquery-ui.min.css"
type="text/css" />');
}
}
catch (err) {
}
});
function CallServer() {
<%=PostBackScript%>
}
function stripNonAlphaNumeric(string) {
var r = string.toLowerCase();
r = r.replace(new RegExp("[^A-z0-9şŞıİçÇöÖüÜĞğ.,-/() ]", 'g'), "");
return r;
}
var initAutoComplete
= (function () {
$(function () {
$("#<%=txt.ClientID%>").autocomplete({
source: function (request, response) {
var hiddenInputValueName = $("#<%=hdnRadioId.ClientID %>").val();
if (hiddenInputValueName) {
var inputValue = $('input[name$="' + hiddenInputValueName +
'"]:checked').val();
if (inputValue) request.term = inputValue + '-' + request.term;
else {
$("#<%=txt.ClientID%>").val('');
return false;
}
}
var host = "";
if (window.location.hostname == "localhost") {
host = '<%=GetBaseUrl()%>';
}
else {
host = window.location.protocol + "//" + window.location.host;
}
var parametertable = '<%=ParameterTable%>';
if ((hiddenInputValueName && request.term.substr(2).trim() === '') ||
(!hiddenInputValueName && request.term.trim() === '')) response(null);
else {
$.ajax({
url: host + "/api/parameterapi/" + parametertable + "/" +
stripNonAlphaNumeric(request.term),
dataType: "json",
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Aciklama,
value: item.KayitNo
}
}));
}
});
}
},
autoFill: true,
minLength: 3,
delay: 300,
select: function (event, ui) {
$("#<%=txt.ClientID %>").val(ui.item.label);
$("#<%=hdn.ClientID %>").val(ui.item.value.toString());
CallServer();
return false;
},
focus: function (event, ui) {
$("#<%=txt.ClientID %>").val(ui.item.label);
return false;
},
change: function (event, ui) {
$("#<%=hdn.ClientID %>").val(ui.item ? ui.item.value : "");
},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
}).blur(function () {
//$(this).autocomplete("close");
}).data("ui-autocomplete")._renderItem = function (ul, item) {
var newText = String(item.label).replace(
new RegExp(this.term, "gi"),
"<span class='ui-state-highlight'>$&</span>");
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + newText + "</a>")
.appendTo(ul);
};
});
});
if (undefined === window.Sys) {
initAutoComplete();
}
else {
Sys.Application.add_load(function (s, e) {
initAutoComplete();
});
}
</script>
<asp:TextBox runat="server" ID="txt" CssClass="input-xlarge"></asp:TextBox>
<asp:Label runat="server" ID="lblRequired" CssClass="REQUIRED" Text="*" Visible="false" />
<asp:HiddenField runat="server" ID="hdn" />
<asp:HiddenField runat="server" ID="hdnParameterTable" />
<asp:HiddenField runat="server" ID="hdnRadioId" />
<span><small>
<asp:Label runat="server" ID="lbl">Üç Harf Giriniz.</asp:Label></small></span>