Combobox with DropDown in SharePoint 2010 to Filter Lists


I am trying to create a combobox list filter (with a dropdown) that will filter a list that is on the page, and I am not sure what is going wrong. When I run the debugger I get an error the listUrl is undefined. I tried to add a listUrl by saying var listUrl = url + ?filter, etc and nothing worked. Here is my complete code. I am trying to use the alert to at least validate I have something coming from the listUrl.

<link href="/Style%20Library/SPLibraries/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="/Style%20Library/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/Style%20Library/SPLibraries/jquery-ui.min.js" type="text/javascript">

    <script src="" type="text/javascript"></script>
<script language="ecmascript" type="text/ecmascript">

    // Settings
    var url = "https://mysite/_vti_bin/listdata.svc/Degreecodes()";
    var field = "Title";

    // Onload
    $(document).ready(function () {
            source: function (req, add) {
                var suggestions = search(req.term, url, field);


    // Search all the listitems by using the REST Service
    // Value is the text that needs to be used in the query
    // listurl is the listdata.svc url withouth the filter params
    // field is the name of the field where the value in exists

    function search(value, listUrl, field) {
        var coll = new Array();
        var url = listUrl + "?$filter=substringof('" + value + "'," + field + ")";
            cache: true,
            type: "GET",
            async: false,
            dataType: "json",
            url: url,
            success: function (data) {
                var results = data.d.results;
                for (att in results) {
                    var object = results[att];
                    for (attt in object) {
                        if (attt == field) {
        return coll;

<div class="demo" style="width: 200px"><div class="ui-widget"><label for="tags">Search: </label><input class="ui-autocomplete-input" id="tags"  autocomplete="off"  /> </div></div>
<div class="ms-error" id="error">&#160;<input id="byBtn" onclick="alert(listurl);" type="submit" value="Submit Query" /></div>

Open in new window

Who is Participating?
mSproutAuthor Commented:

  ajax: {
    url: "",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // search term
    processResults: function (data, page) {
      // parse the results into the format expected by Select2.
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data
      return {
        results: data.items
    cache: true
  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
  minimumInputLength: 1,
  templateResult: formatRepo, // omitted for brevity, see the source of this page
  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
IS it line 31 that throws the error?  Can you check line 17, I would guess that req.term is null since url and field are both set locally.
mSproutAuthor Commented:
Using Ajax and the right Jquery plugin I was able to find the solution.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.