CODEWITHSUNDEEP
jquerysharepoint
MD18358
MD18358

Reputation: 25

Using autocomplete to filter a list in a jQuery list in SharePoint

I have loaded my Autocomplete combobox script from: http://jqueryui.com/demos/autocomplete/#combobox and it appears with my list.

Below it, I have a list that works just fine using:

  • function processResult(xData, status) { $(xData.responseXML).find("List").each(function() { $("#data").append( + $(this).attr("Title") +); }); }

    • Thanks to Jan Tielens Bloggings: http://weblogs.asp.net/jan/archive/2009/04/09/calling-the-sharepoint-web-services-with-jquery.aspx

    How do I get the list to actually filter once something is selected? I assume its in the $(this).attr() but nothing seems to work.

    Apologies in advance for the DAY1 Newbie question.

    Thanks

    Upvotes: 2

    Views: 9335

    Answers (2)

    Anthony Graglia
    Anthony Graglia

    Reputation: 5435

    Use SPServices and use the select option in autocomplete:

    <link href="../css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript" src="../js/jquery.SPServices-0.5.8.js"></script>

<script type="text/javascript">
$(document).ready (function() {
    $().SPServices({
        operation: "GetListItems",
        async: true,
        listName: "Resources",
        CAMLViewFields: "<ViewFields>" +
            "<FieldRef Name='Title' />" +
            "<FieldRef Name='resource_link' />" +
            "<FieldRef Name='image_url' />" +
            "</ViewFields>",
        completefunc: AttachAutoComplete
    });

    function AttachAutoComplete(xmlResponse) {
        var domElementArray = $( "[nodeName=z:row]", xmlResponse.responseXML );

        var dataMap = domElementArray.map(function() {
            return {
                value: $(this).attr('ows_Title'),
                url: $(this).attr('ows_resource_link'),
                image_url: $(this).attr('ows_image_url')
            };
        });

        var data = dataMap.get();

        $("input#inputAutoComplete").autocomplete({
            source: data,
            formatItem: function(row){
                if(row){
                    return "<table><tr><td><img src=\"" + row.image_url + "\" border=\"0\" /></td><td>"+ row.value + " 55</td></tr></table>";
                }
            },
            select: function(e, ui){
                window.open(ui.item['url']);
            }
        });
    }
</script>

    Upvotes: 3

    CraigKerstiens
    CraigKerstiens

    Reputation: 5979

    You can fire an onkeyup even if you are using a standard input. It would look something like:

    <input type="text" name="search" id="txtSearch" onkeyup="searchOpen()" />

    Upvotes: 1

    Related Questions