URX Search Query With Styling & Deep-Link Resolution

URX-resolution-styling-example.html

<!--In the code block below, we’ve done the following:
1. Added a search box and search button to the page
2. Constructed a URX search query
3. Displayed the search results with styling
4. Attached deep links to the search results that send a user into a destination app (or to the requested content on the web if a user doesn’t have the app installed)-->
 
<div>
  <h1>Use me on your mobile device to find music in your apps:</h1>
  <input type="text" id="search-input" placeholder="Artist, album or song" />
  <input id="search-button" type="button" value="Search" />
  <div id="search-results"></div>
</div>
 
//import URX
<script src=”urx.js”></script>
 
<script type="application/javascript">
//Set your API KEY
$urx.setApiKey("API KEY GOES HERE");
  
//Display each search result
  function createSearchResultItem(result) {
    var div = document.createElement('div');
    // Add the search item's image
    var image = document.createElement('img');
    image.setAttribute('src', result.imageUrl);
    image.setAttribute('width', "50px");
    image.setAttribute('height', "50px");
    div.appendChild(image);
    // Add the search item's name
    div.appendChild(document.createTextNode(result.name));
    // Take the user to the desired app/web content when clicked on
    div.result = result;
    div.addEventListener('click', function(){
      this.result.resolveDeeplinkWithWebFallback(function(){});
    });
    return div;
  }
 
  document.querySelector('#search-button').addEventListener('click', function(){
    var searchResultsDiv = document.querySelector("#search-results");
    // Clear any previous search result items
    while(searchResultsDiv.hasChildNodes()) {
      searchResultsDiv.removeChild(searchResultsDiv.lastChild);
    }
    // Grab the user's query from the search input box
    var query = document.querySelector("#search-input").value;
    // Only show music results (to learn more about action filters, see http://developers.urx.com/reference/search-operators.html#action)
    query = query + " action:ListenAction";
    // Search URX with the user's query
    $urx.search(query, function(response) {
      for (var i = 0; i < response.results.length; i++) {
        var searchItemDiv = createSearchResultItem(response.results[i]);
        searchResultsDiv.appendChild(searchItemDiv);
      };
    });
  });
</script>