JQuery AutoComplete using XML with Key Value pair

Recently i have been to different websites and blogs for autocomplete plug-in but i could not find much help regarding to auto complete with key value pair specially using xml.  because personally i think using xml file for autocomplete is better option than using JavaScript strings because  of ease of use of xml file. It can be generated and changed easily.

AutoComplete

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. For more help you can read all documentation and examples about this plug-in at http://docs.jquery.com/Plugins/Autocomplete#API_Documentation.

To download JavaScript files please visits http://www.pengoworks.com/workshop/jquery/autocomplete.htm.

To download JQuery
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js

 

Output

 

How to use XML with AutoComplete

You may find  couple of example on internet but none of them has actually worked for me.

First of all you can create any xml. I have an xml file  having links inside in it.

<?xml version="1.0"?>
<items>
  <item>
    <text> <![CDATA[yahoo]]> </text>
    <value><![CDATA[www.yhaoo.com]]></value>
  </item>
  <item>
    <text><![CDATA[google]]></text>
    <value><![CDATA[www.google.com]]></value>
  </item>
  <item>
    <text><![CDATA[msn]]></text>
    <value><![CDATA[www.msn.com]]></value>
  </item>
</items>

JavaScript to use JQuery and plug-in

 

    <script type="text/javascript" src="JavaScripts/jquery-1.3.2.min.js"></script>
    <script src="JavaScripts/jquery.autocomplete.pack.js" type="text/javascript"></script>

To use JQuery with XML file

 <script type="text/javascript">
        //this function will clear only the default text of input field
        function clearText(thefield) {
            if (thefield.defaultValue == thefield.value)
                thefield.value = ""
        }
        $(document).ready(function() {
            // get the input field
            var input = $('input#txtResourceFinder');
            // This function opens the full list before even typing
            // if you dont want this  omit this part.
            input.one('click', function() {
                $(this).focus().click().select();
                $(this).one('click', arguments.callee);
            });
            // Jquery autocomplete with xml file
            input.autocomplete('links.xml', {
                delay: 10,
                minChars: 2,
                matchSubset: 1,
                matchContains: 1,
                minChars: 0,
                parse: parseXML,
                formatItem: formatItem,
                formatResult: formatResult
            }).result(function(event, item) {
                window.location.href = item.value
            });
            
            // this function will parse xml and return as a array of string
            function parseXML(xml) {
                var results = [];
                $(xml).find('item').each(function() {
                    var text = $.trim($(this).find('text').text());
                    var value = $.trim($(this).find('value').text());
                    results[results.length] = { 'data': { text: text, value: value },
                        'result': text, 'value': value
                    };
                });
                return results;
            };
            
            function formatItem(data) {
                return data.text;
            };
            
            function formatResult(data) {
                return data.text;
            };
        });
    </script>

parseXML: This function will parse xml and return as a array of text value pairs.

As you can see above that result returns item as a text value pair. Once you select the option it will redirect to that location.

Download Code