Going For AJAX: autocomplete

Showing posts with label autocomplete. Show all posts

Wednesday, March 28, 2012

How do I put a scrollbar on an AutoComplete extender?

Hi, I'm new to the AJAX toolkit (and AJAX) so I hope you'll forgive me asking this stupid question. I can see from the example website that it is possible to have an AutoComplete extender which if you have more than say ten suggestions, it shows the first ten and then you can scroll through the rest.

However, I can't see which bit of the example code tells it to do that. What I Here's what I've got right now.

<form id="form1" runat="server">
<asp:ScriptManager ID="AutoCompleteScriptManager" runat="server" >
<Services>
<asp:ServiceReference Path="AutoCompleteService.asmx" />
</Services>
</asp:ScriptManager>
<br />
<asp:TextBox ID="TextBox1" runat="server" Columns="40" ></asp:TextBox>

<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender" runat="server" TargetControlID="TextBox1" CompletionInterval="10" MinimumPrefixLength="1" ServicePath="AutoCompleteService.asmx" ServiceMethod="GetCompletionList" >

</ajaxToolkit:AutoCompleteExtender>
</form

I'd appreciate it if somebody could point me in the right direction. Thanks.

Just thought I'd bump this thread as it had gone off the front page. I'd really appreciate some help with this.

You need to use an appropriate CSS class with overflow:auto on the appropriate elements.

Set a value for CompletionListCssClass to something that controls the CSS correctly. Not being a CSS chap, I leave that exercise to somebody else :)

Hi GillouX,

Here is the sample that we set the AutoComplete's CompletionListElementID to a Panel and then set the css to the panel.

<%@. Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;

font-weight: normal;
border:solid 1px #006699;

line-height:20px;
padding:2px;
background-color:White;
}

.AutoExtenderList
{
border-bottom:dotted 1px #006699;
cursor:pointer;
color:Maroon
}

.AutoExtenderHighlight
{
color:White;
background-color:#006699;
cursor:pointer;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TBSearch" runat="server"></asp:TextBox>
<asp:Panel runat="server" ID="myPanel" Height="100px" ScrollBars="Vertical">
</asp:Panel>
<ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" BehaviorID="myACEBID" TargetControlID="TBSearch"
ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="1" CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList" CompletionListHighlightedItemCssClass="AutoExtenderHighlight" CompletionInterval="1" EnableCaching="true" CompletionSetCount="12"CompletionListElementID="myPanel"/>
<br/><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>

WebService

"C#" Class="AutoComplete" %>using System;using System.Web;using System.Web.Services;using System.Web.Services.Protocols;using System.Collections.Generic;[WebService(Namespace ="http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][System.Web.Script.Services.ScriptService]public class AutoComplete : System.Web.Services.WebService { public AutoComplete() { } [WebMethod] public string[] GetCompletionList(string prefixText, int count, string contextKey) {// contextKey += "23"; if (count == 0) { count = 10; } if (prefixText.Equals("xyz")) {return new string[0]; } Random random =new Random(); List<string> items =new List<string>(count);for (int i = 0; i < count; i++) {char c1 = (char)random.Next(65, 90);char c2 = (char)random.Next(97, 122);char c3 = (char)random.Next(97, 122); items.Add(prefixText + c1 + c2 + c3); }return items.ToArray(); }}

I hope this help.

Best regards,

Jonathan

Monday, March 26, 2012

How do i create autocomplete with database ?

How do i create autocomplete with database like sql words list.. pls, thanks!

Hope this helps:

http://forums.asp.net/thread/1563579.aspx

If noone else answers here, try searching forum... 100s of autocomplete questions and codes..

Have you taken a look at theCascadingDropDown Walkthrough that does something very similar? You can apply the same principles to the autocomplete extender.

What I do is create a local web service that queries the database. An example of the code for the web service is as follows:

using

System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

///

<summary>
/// Summary description for roster_list
///</summary>
[WebService(Namespace =http://tempuri.org/)]
[WebServiceBinding(ConformsTo =WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
publicclassroster_list : System.Web.Services.WebService {

public roster_list () {

}

[WebMethod]
publicstring[] GetRosterListValues(string prefixText,int count)
{
SqlConnection RosterListConnection;
SqlCommand RosterListCommand;
SqlDataReader RosterListReader;
DataTable RosterListDataTable =newDataTable();

RosterListConnection =newSqlConnection();
RosterListConnection.ConnectionString =ConfigurationManager.ConnectionStrings["RosterConnectionString"].ConnectionString;
RosterListCommand =newSqlCommand();

RosterListCommand.CommandText ="SET ROWCOUNT @.Count " +
" SELECT column " +
" FROM t_table" +
" WHERE column LIKE @.PrefixText + '%') " +
" ORDER BY column " +
" SET ROWCOUNT 0";

RosterListCommand.Parameters.AddWithValue("@.PrefixText", prefixText);
RosterListCommand.Parameters.AddWithValue("@.Count", count);
RosterListCommand.CommandType =CommandType.Text;
RosterListCommand.Connection = RosterListConnection;

try
{
RosterListCommand.Connection.Open();
RosterListReader = RosterListCommand.ExecuteReader(CommandBehavior.CloseConnection);
RosterListDataTable.Load(RosterListReader);
}
catch { }
finally
{
RosterListDataTable.Dispose();
RosterListCommand.Dispose();
RosterListConnection.Dispose();
}

string[] ReturnValues =newstring[RosterListDataTable.Rows.Count];
for (int i = 0; i < RosterListDataTable.Rows.Count; i++)
ReturnValues[i] = RosterListDataTable.Rows[i][0].ToString();

return ReturnValues;
}
}

Then for my extender I have:

<cc1:AutoCompleteExtenderID="AutoCompleteExtender_Roster"runat="server"
TargetControlID="TextBox_Roster"
CompletionInterval="250"
MinimumPrefixLength="1"
ServicePath="../web_services/roster_list.asmx"
ServiceMethod="GetRosterListValues"
CompletionSetCount="15" />

Saturday, March 24, 2012

how do i autocomplete in ajax?

hi every1 i just upgraded from atlas to ajax 2.0

it wasnt to hard but i have a problem i used the <atlas:autocomplete

tag in atlas

but it wasnt like the other tags i cant just cahnge the atlas to asp:

cause it dosnt have it

how can i do it then?

any1 know?

plz help tnx a lot

Hi, you can easily implement auto completion in ajax using AJAX AutocompleteExtender, the sample code is shown below.

.aspx page

<asp:TextBox ID="txt_search_city" Width="130px" runat="server">

<cc1:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server" TargetControlID="txt_search_city"
ServiceMethod="GetCompletionListWithContext" UseContextKey="true" MinimumPrefixLength="2"
EnableCaching="false" CompletionSetCount="20" CompletionInterval="2000" FirstRowSelected="true"
DelimiterCharacters=";," />

And in Code Behind - aspx.vb

<System.Web.Services.WebMethod()> _
<System.Web.Script.Services.ScriptMethod()> _
Public Shared Function GetCompletionListWithContext(ByVal prefixText As String, ByVal count As Integer, ByVal contextKey As String) As String()
If Not contextKey = Nothing Then
Return "this is a total of fifteen words that will be returned when we use context".Split(" ")
End If
If count = 0 Then
count = 20
End If
Dim items As New System.Collections.Generic.List(Of String)
'get data from database
Dim _loc As New Locations
Dim str As String
Dim ds As DataSet = _loc.Load_Cities(prefixText, count)
If ds.Tables(0).Rows.Count > 0 Then
Dim i As Integer
For i = 0 To count - 1
str = ds.Tables(0).Rows(i).Item("city").ToString()
items.Add(str)
Next
End If
Return items.ToArray()
End Function

This will help you implementing auto completion in ASP.NET 2.0 using AJAX Toolkit

hi tnx for the reply

but can you maybe tell me how do i do it in c#?

and what are these two?

<System.Web.Services.WebMethod()> _
<System.Web.Script.Services.ScriptMethod()>

where do i put stuff like that?

please help

tnx

Hi,

AJAX Toolkit Autocomplete Extender use Webservice Method for fetching records and display in auto popup list, when user type some text in textbox. therefore you must create web method with same definition as describe in ajax autocomplete documentation.

If you want not to create separate webservice page, instead of it define method in normal page code behind, then you must first, import the following namespace.

using System.Web.Services;

using System.Web.Script.Services;

then in code create a method as shown below.

[WebMethod]
public string[] GetCompletionList(string prefixText, int count)
{

'// rest define in another post

}

Thanks.

Wednesday, March 21, 2012

how can I transfer more than one query conditions to the autocomplete control

Now I have a aspx page to show the department employee list. At the above of the page is the query section in which I can choose a department from a dropdownlist and a textbox for typing employee name. Since the signature of the autocomplete controlwebserviceis

"public string[] GetPersonNameHasCertainPrefix(string prefixText, int count)"

So the only query condition I can get is the 'Person Name', when I type "John" in the textbox the list I get is the person name start with 'John' fromall of the company. but now I just want to get the person name start with 'John'in certain department.

I don't know how to get this.

Any help and suggestions are apperciated. Thank you all:)

"public string[] GetPersonNameHasCertainPrefix(string prefixText, int count)"

what is this ? is this method they are given (i.e u r database layer developer)

it is wrong .we must send department name to database query is must

send department name concadinating with name

like this

u selected software department

and u type john

send to this method as sofware+john as a one string .

change query to saprate that string

it is not suitable to u let inform briefly

Thank yousudhakargroup。

Maybe I didn't express myself clearly.

Anyway I have found the solution for this problem. The Ajax toolkit developer have left another overload method have a "contextkey" parameter, the type of it is STRING, so you can assign this parameter either in client or server side and pass it to the webservice.

Since it is a string, so you can pass almost everything, that's really great!^_^