Wednesday, July 31, 2013

Using REST to search in JQuery

Building on yesterday's post,  here's adding a search to the same JQuery list: SQL Developer Exchange Requests


SQL Developer Exchange Requests

The REST Template is only different by adding in a bind variable and adjusting the select some:



The other thing I added into the JQuery list is the weight of the searched items.  Which can be seen in the blue bar here:



The javascript changes are also fairly small. I made a function named search which takes in what the text is to search on. Then few lines to bind the function and the listviewbeforefilter event together.

// attach to the before filter in the list
     $( "#results" ).on( "listviewbeforefilter", function ( e, data ) {
          // grab the value of the search field
          var $ul = $( this ),
  $input = $( data.input ),
  value = $input.val();
          // if blanked go back to the recent list
          if ( value == '' ) {
              loadRecent();
          } else {
            // debugging
              console.log("Loading Search:"+value);
            search(value);
          }
        });


 function search(search){
   console.log("searching for '" + search + "'");
    // out with the old
   $("#results").children().remove();

    // in with the new
    $.ajax({
      url: "http://apex.oracle.com/pls/apex/dbtools/features/search?text=" + search ,
      type: "GET",
      success: function (data) {
        console.log(data);
        if ( data.items.length == 0 ){ noResults();}
        ko.applyBindings(data, document.getElementById("searchPage"));
        $('#results').listview('refresh');
      }
    });
  }