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

Question

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

Have a look at SPServices for communicating with SharePoint webservices using jQuery/javascript: spservices.codeplex.com — Dribbel
– Dribbel, Commented Mar 7, 2011 at 20:25
Can you elaborat e on how you plan on using this? Are you writing a custom web part? Are you using adataview web part, list view, etc.. — brian brinley
– brian brinley, Commented Mar 8, 2011 at 2:09

Anthony Graglia · Accepted Answer · 2011-03-09 09:55:44Z

3

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>

answered Mar 9, 2011 at 9:55

Anthony Graglia

5,4355 gold badges49 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MD18358 Over a year ago

This is great!!! if I add: $("#tasksUL").empty(); The drop down list will refresh when I select the autocomplete again.

Anthony Graglia Over a year ago

.html("") works too... :o) But I would stick with what you have.

Anthony Graglia Over a year ago

And since you are new to STACK OVERFLOW... You should accept answers. This helps show they are answered and helps you and others get deserved reputation points which also allows users to have more options and resources on the site. Have fun.

Anthony Graglia Over a year ago

Also, @MD, you may have to write your own formatItem function. Im not sure the autocomplete from SPServices supports it. But having it wont break it.

CraigKerstiens · Accepted Answer · 2011-03-07 19:41:44Z

1

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()" />

answered Mar 7, 2011 at 19:41

CraigKerstiens

5,9891 gold badge27 silver badges29 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related