You are currently browsing the tag archive for the ‘HTML’ tag.

The auto complete extender comes as part of the AjaxControlToolkit, it’s a really neat little extension to a TextBox that allows a user to be given suggestions based on what they type.

It is currently restricted so that it only shows text and no more. I’ve made a couple of changes that allow you to pass arbitrary html, which makes things a like more interesting.

Ok, so in the first thing I need to be able to do is pass the html from the webservice. This bit is easy, all we need to do is create an overload to AutoCompleteExtender. CreateAutoCompleteItem method. That’s easy, just add the following method to the AutoCompleteExtender class:

public static string CreateAutoCompleteItem(string text, string value, string markup)
{
return new JavaScriptSerializer().Serialize(new Pair(text, new Pair(value, markup)));
}

Now we need to make sure that the html is displayed, this is done by the _update method in AutoCompleteBehavior.js. In this method there is a loop, this spins through each of the list items that comes back from the web service. Essentially I detect if html is supplied and if it is then use the html, rather than simply putting a text node in place.

The other change is to the _setText function, this must search through the parent nodes to find which one has the text and id values which we sent from our web service.

The two files are attached, take them and drop them into your project, all your old code should continue to work, but you could write a web service like this to display html:

Public Function GetPersonList(ByVal prefixText As String, ByVal count As Integer) As String()

Dim table As DataSet
table = Database.Fill(“PersonSearch”, New SqlParameter() { _
Database.CreateParameter(“@Name”, SqlDbType.NVarChar, ParameterDirection.Input, prefixText), _
Database.CreateParameter(“@Count”, SqlDbType.Int, ParameterDirection.Input, count)})

Dim list(table.Tables(0).Rows.Count – 1) As String
Dim html As String

For i As Integer = 0 To list.Length – 1

html = String.Format(”

{0} {1}

“, _
table.Tables(0).Rows(i)(“Forename”), _
table.Tables(0).Rows(i)(“Surname”))

list(i) = AutoCompleteExtender.CreateAutoCompleteItem(String.Format(“{0} {1}”, table.Tables(0).Rows(i)(“Forename”), table.Tables(0).Rows(i)(“Surname”)), _
String.Format(“{0}”, table.Tables(0).Rows(i)(“PersonId”)), _
html)

Next

Return list

End Function

That’s it, you now have a list of people, with a picture next their name, which is nice.

I hope this helps someone.

Here’s the complete modified AutoCompleteBehavior.js: http://www.mediafire.com/?4ztezjxnfnl

and the modified AutoCompleteExtender.cs: http://www.mediafire.com/?5idmqczandm

I’d like to think that I know a fair amount about core HTML.  That said there’s always room to learn more, and yesterday was a case in point.

Until now, when wanting to separate groups of elements in a selection list we’ve always introduced option elements surrounded by extra characters, e.g. (“–Intermediate / Higher /Advanced Higher”) in the example below.

<SELECT>
<OPTION>--National Assessments (5-14)
<OPTION>A
<OPTION>B
<OPTION>C
<OPTION>D
<OPTION>E
<OPTION>F
<OPTION>--Access 1,2,3 / Core Skills
<OPTION>Pass
<OPTION>Fail
<OPTION>--Intermediate / Higher /Advanced Higher
<OPTION>A
<OPTION>B
<OPTION>C
<OPTION>D
<OPTION>--Standard Grades
<OPTION>Grade 1 - Credit Level
<OPTION>Grade 2 - Credit Level
<OPTION>Grade 3 - General Level
<OPTION>Grade 4 - General Level
<OPTION>Grade 5 - Foundation Level
<OPTION>Grade 6 - Foundation Level
<OPTION>Grade 7 - Course Completed
<OPTION>-HNC/HND
<OPTION>Pass
<OPTION>Fail
<OPTION>--NVQ/SVQ
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5</SELECT>

As a solution this is a bit messy as the user is still able to select the separator options, and therefore relies on client or server validation to prevent this being saved.  What a revolution then to find that there is an HTML element that allows you to group together a number of option elements – and it’s called OPTGROUP.  Go figure!

In action then, the list above then becomes:

<SELECT>
<OPTGROUP label="National Assessments (5-14)">
<OPTION>A
<OPTION>B
<OPTION>C
<OPTION>D
<OPTION>E
<OPTION>F
</OPTGROUP><OPTGROUP>Access 1,2,3 / Core Skills
<OPTION>Pass
<OPTION>Fail
</OPTGROUP><OPTGROUP label="Intermediate / Higher /Advanced Higher">
<OPTION>A
<OPTION>B
<OPTION>C
<OPTION>D
</OPTGROUP><OPTGROUP label="Standard Grades">
<OPTION>Grade 1 - Credit Level
<OPTION>Grade 2 - Credit Level
<OPTION>Grade 3 - General Level
<OPTION>Grade 4 - General Level
<OPTION>Grade 5 - Foundation Level
<OPTION>Grade 6 - Foundation Level
<OPTION>Grade 7 - Course Completed
</OPTGROUP><OPTGROUP label="HNC/HND">
<OPTION>Pass
<OPTION>Fail
</OPTGROUP><OPTGROUP label="NVQ/SVQ">
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5</OPTGROUP></SELECT>

It’s browser compliant, and you can style the OptGroup elements different to the Option elements.

Now I can’t wait to see what I can learn today.