Question

In my Win 8 app, based on a blank template, I have successfully added search contract and it seems to work despite the fact that I have not linked it to any data yet, so, for now, when I search any term in my app it simply takes me to the searchResults page with the message “No Results Found” this is what I was expecting initially.

Now what I wish to do is link my database into the searchResults.js file so that I can query my database. Now outside of the search contract I have tested and connected my Db and it works; I did this using WinJS.xhr, to connect to my web-service which in turn queries my database and returns a JSON object.

In my test I only hardcoded the url, however I now need to do two things. Move the test WinJS.xr data for connecting my DB into the search contract code, and second – change the hardcoded url to a dynamic url that accepts the users search term.

From what I understand of Win 8 search so far the actual data querying part of the search contract is as follows:

// This function populates a WinJS.Binding.List with search results for the provided query.
    _searchData: function (queryText) {
        var originalResults;
        // TODO: Perform the appropriate search on your data.
        if (window.Data) {
            originalResults = Data.items.createFiltered(function (item) {
                return (item.termName.indexOf(queryText) >= 0 || item.termID.indexOf(queryText) >= 0 || item.definition.indexOf(queryText) >= 0);
            });
        } else {`enter code here`
            originalResults = new WinJS.Binding.List();
        }
        return originalResults;
    }
});

The code that I need to transfer into this section is as below; now I have to admit I do not currently understand the code block above and have not found a good resource for breaking it down line by line. If someone can help though it will be truly awesome! My code below, I basically want to integrate it and then make searchString be equal to the users search term.

   var testTerm = document.getElementById("definition");
    var testDef = document.getElementById("description");

    var searchString = 2;
    var searchFormat = 'JSON';

    var searchurl = 'http://www.xxx.com/web-service.php?termID=' + searchString +'&format='+searchFormat;

    WinJS.xhr({url: searchurl})
      .done(function fulfilled(result)

      {
          //Show Terms                 
          var searchTerm = JSON.parse(result.responseText);

          // var terms is the key of the object (terms) on each iteration of the loop the var terms is assigned the name of the  object key
          // and the if stament is evaluated

          for (terms in searchTerm) {

              //terms will find key "terms"
              var termName = searchTerm.terms[0].term.termName;
              var termdefinition = searchTerm.terms[0].term.definition;

              //WinJS.Binding.processAll(termDef, termdefinition);
              testTerm.innerText = termName;
              testDef.innerText = termdefinition;
          }              
    },
              function error(result) {
                  testDef.innerHTML = "Got Error: " + result.statusText;
              },
              function progress(result) {
                  testDef.innerText = "Ready state is " + result.readyState;
              });          

Answer 1

I will try to provide some explanation for the snippet that you didn’t quite understand. I believe the code you had above is coming from the default code added by Visual Studio. Please see explanation as comments in line.

/**
 * This function populates a WinJS.Binding.List with search results 
 * for the provided query by applying the a filter on the data source
 * @param {String} queryText - the search query acquired from the Search Charm
 * @return {WinJS.Binding.List} the filtered result of your search query.
 */
_searchData: function (queryText) {
    var originalResults;
    // window.Data is the data source of the List View 
    // window.Data is an object defined in YourProject/js/data.js
    // at line 16 WinJS.Namespace.define（"Data" ...
    // Data.items is a array that's being grouped by functions in data.js
    if (window.Data) {
        // apply a filter to filter the data source
        // if you have your own search algorithm, 
        // you should replace below code with your code
        originalResults = Data.items.createFiltered(function (item) {
            return (item.termName.indexOf(queryText) >= 0 ||
                    item.termID.indexOf(queryText) >= 0 || 
                    item.definition.indexOf(queryText) >= 0);
            });
    } else {
        // if there is no data source, then we return an empty WinJS.Binding.List
        // such that the view can be populated with 0 result
        originalResults = new WinJS.Binding.List();
    }
    return originalResults;
}

Since you are thinking about doing the search on your own web service, then you can always make your _searchData function async and make your view waiting on the search result being returned from your web service.

_searchData: function(queryText) {
    var dfd = new $.Deferred();
    // make a xhr call to your service with queryText
    WinJS.xhr({
        url: your_service_url,
        data: queryText.toLowerCase()
      }).done(function (response) {
           var result = parseResultArrayFromResponse(response);
           var resultBindingList = WinJS.Binding.List(result);
           dfd.resolve(result)
      }).fail(function (response) {
          var error = parseErrorFromResponse(response);
          var emptyResult = WinJS.Binding.List();
          dfd.reject(emptyResult, error);
      });
    return dfd.promise();
}
...
// whoever calls searchData would need to asynchronously deal with the service response.

_searchData(queryText).done(function (resultBindingList) {
    //TODO: Display the result with resultBindingList by binding the data to view
}).fail(function (resultBindingList, error) {
    //TODO: proper error handling
});