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 == '' ) {
          } else {
            // debugging
              console.log("Loading Search:"+value);

 function search(search){
   console.log("searching for '" + search + "'");
    // out with the old

    // in with the new
      url: "" + search ,
      type: "GET",
      success: function (data) {
        if ( data.items.length == 0 ){ noResults();}
        ko.applyBindings(data, document.getElementById("searchPage"));