nad nad - 2 months ago 6
ASP.NET (C#) Question

Adding scroll if the data is very long in autocomplete textbox

I have implemented a functionality for

autocomplete multiselect textbox
and it works very well.

So now my issue here is, If I have 3000 records and I type A in the textbox, a very long list of values starts appearing in the list.

Have a look at the below screenshot.

Img

So, is there any way to reduce by adding scroll to the list. Below is my complete set of code.

ASPX

<asp:TextBox ID="txt712" runat="server" Width="80%"></asp:TextBox>


Jquery

$(document).ready(function () {
SearchText();
});
function SearchText() {
$("#txt712").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Frm_Agreement_Master.aspx/GetAutoCompleteData",
data: "{'username':'" + extractLast(request.term) + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
$("#txt712").bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
}


CS

[WebMethod]
public static List<string> GetAutoCompleteData(string username)
{
List<string> result = new List<string>();
using (OracleConnection ObjPriCon = new OracleConnection(System.Configuration.ConfigurationManager.ConnectionStrings["OracleConn"].ToString()))
{
using (OracleCommand cmd = new OracleCommand("SELECT DISTINCT survey_area_7_12 FROM xxcus.xxacl_pn_farming_mst WHERE survey_area_7_12 LIKE '%' || :searchtext || '%'", ObjPriCon))
{
ObjPriCon.Open();
cmd.Parameters.AddWithValue(":searchtext", username);
OracleDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
while (dr.Read())
{
result.Add(dr["SURVEY_AREA_7_12"].ToString());
}
}
return result;
}
}
}


Let me know how to add
Scroll
so that it doesn't gets Overlapped

Answer

With JQuery UI autocomplete, you can do like this:

.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}
Comments