how to populate jquery autocomplete

Wasim 14 posts 34 karma points

Feb 12, 2011 @ 14:35

Hi,

I have a node in the content tree called Educations. In this node we have all the types of educations listed as

child nodes. Now I simply need to create a search functionality on each page or on most pages. This search box does

not exactly function like a real search but rather it will be an autocomplete search box as a jquery plugin

(http://docs.jquery.com/Plugins/autocomplete). If a match is found it should go to the respective page, if no match

is found it should just go to a noresults.aspx page.

I want the autocomplete's suggestion list to have it's data as listing of all the courses(child nodes of parent node

- Education). I am planning to create it as a macro so that I can use it on whichever template I want. Now the

autocomplete can accept its data source as a local array or even an external source. I haven't tried using the

external source yet but have tried using local data which I have hardcoded it as
var pages = [ {text:'Education 1', url: '/education1.aspx'}, {text:'Education 2', url: '/education2.aspx'} ];

Now rather than hardcoding these values I need it to be more dynamic by picking the child nodes automatically. I'm

quite new to xslt and have no idea how to go about looping through the Education node and populate the autocomplete

with the array structure as above with 2 values the nodename and the niceurl link. Also the jquery autocomplete will

be initialized on the head section of the template like this:

$().ready(function() {

The above code seems self explanatory so won't go into details. So I simply need to populate the pages variable with

the values from the xslt. How do I go about doing that? The above code does not necessarily have to be in the head

section but I prefer putting it there. Otherwise if there is no other option the code could go into the xslt/macro.

Another question, can I have js embeded into my xslt and is it possible to put the js into the head section from the

xslt dynamically?

Wow I can't believe I have written all that text but the main point is how to populate the autocomplete with nodes

in xslt. The other option would be to use an ashx handler file to populate however not sure how to do that either.

Please if possible provide me with code for both the options xslt vs ashx.

Thanks,
Wasim

Copy Link

Lesley 284 posts 143 karma points

Feb 12, 2011 @ 22:33

There are a couple of questions to answer, but I'll start with the easy one.

You can put your jquery in the head section no problem, and have the var pages populated by your macro like this:

var pages = <umbraco:Macro Alias="EducationPages" runat="server" />;

As for the necessary xslt, you could do something like:

  <xsl:variable name="educationPageNode" select="$currentPage/ancestor-or-self::root/* [name()='Education']" />  
  [
  <xsl:for-each select="$educationPageNode/*"> 
    {text: '<xsl:value-of select="current()/@nodeName" />', url: '<xsl:value-of select="umbraco.library:NiceUrl(current()/@id)" />' }
    <xsl:if test="not(position()=last())">
      ,
    </xsl:if>
  </xsl:for-each>
  ]

I don't think that xslt is perfect, so you'll have to do some tweaking. Hopefully it's enough to get you started!

Copy Link

Wasim 14 posts 34 karma points

Feb 14, 2011 @ 09:50

Hi Lesley,

Thanks for your response. Here is the final xslt I used. I decided to put the js within the body so that it only renders it when the search box is used on a template:

<xsl:variable name="educationPageNode" select="$currentPage/ancestor-or-self::root//* [@nodeName='Educations']" />

<script type="text/javascript">
<![CDATA[
  $(document).ready(function() {

  function formatItem(row) {
    return row[0] + " (<strong>id: " + row[1] + "</strong>)";
  }

  var pages = [
]]>
  <!-- Populate Suggestions //-->
  <xsl:for-each select="$educationPageNode/* [@isDoc and string(umbracoNaviHide) != '1']">
    <xsl:sort select="@nodeName" />
    {text: '<xsl:value-of select="current()/@nodeName" />', url: '<xsl:value-of select="umbraco.library:NiceUrl(current()/@id)" />' }
    <xsl:if test="not(position()=last())">,</xsl:if>  
  </xsl:for-each>
  
  <![CDATA[
  ];
  
  var searchboxwidth = $(".searchbg").width();
  var suggestwidth = searchboxwidth - 5;
  
  $(".searchtextbox").autocomplete(pages, {
    formatItem: function(data) { return data.text},
    minChars: 3,
    width: suggestwidth,
    scroll: true,
    scrollHeight: 300,
    autoFill:true}).result(function(event, data) {
      if (typeof(data) != "undefined")
      {
        window.location.href = data.url;
        
      }
      else
      {
        window.location.href = "noresults.aspx";
      }
    });
  
  $("#txtSearch").keydown(function(event) {
    if (event.keyCode == '13') {
     $("#txtSearch").search();
     }
  });
  
  $("#btnSearch").click(function()
    {
      $("#txtSearch").search();
    }
  );

});
]]>

</script>

Copy Link

is working on a reply...

Flag this post as spam?

How to populate jquery autocomplete