Searchbar App

On the Interact Community page, we've implemented a great feature that is very useful for driving engagement and making the front page very useful as shown below:

We're regularly asked how this has been achieved, and the answer is via the ADK. The Custom App - which is available as a Widget - sets up a text box and a dropdown to allow the user to enter a search term, as well as selecting a particular content area to search within. These are added in the HTML component of the widget.

The JavaScript then attaches an event to the Search button. Once clicked, the user is navigated to the Search page passing through the selected content area and the search term that has been entered by the user

<div class="hidden-phone">
  <h1 style="text-align: center; color: rgb(255, 255, 255); margin-top:0; font-size: 55px; margin-bottom: 40px; letter-spacing: -2px;">Hi <span id="welcomename" style="margin-left: 5px;">Phil</span>, how can we help?</h1>
  <div class="input-append" style="text-align: center;width:100%;">
    <input id="searchinput" placeholder="What are you looking for?..." style="padding: 7px 25px 6px; width: 60%; border-radius: 10px 0 0 10px; height: 40px; font-size: 20px;" type="text"> <select id="searchselect" style="height: 35px;font-size:20px; border-radius: 0px; width: 150px;height:55px;">
      <option value="1">
        University
      </option>
      <option value="2">
        Collaborate
      </option>
    </select> <input class="btn btn-large btn-primary" id="searchbtn" style="height: 55px; font-size: 20px; padding: 15px 30px;" type="button" value="Search">
  </div>
  <p id="popular" style="text-align:left;margin-left:70px;color:white;"><strong>Popular Help Topics:</strong> <a href="/Interact/Pages/Content/Document.aspx?id=7255" style="color:#fff;">Rewards</a>, <a href="/Interact/Pages/Content/Document.aspx?id=7711" style="color:#fff;">Authentication</a></p>
</div>
<div class="hidden-desktop hidden-tablet">
  <h1 style="text-align: center; color: rgb(255, 255, 255); margin-top: 0; font-size: 36px; line-height: 40px; margin-bottom: 30px; letter-spacing: -2px;">Hi there, how can we help?</h1>
  <p id="popular" style="text-align: center; margin-left: 0; margin-bottom: 80px; color: white;"><strong>Popular Help Topics:</strong> <a href="/Interact/Pages/Modules/Blog/Blog.aspx?person=2905&amp;post790" style="color:#fff;">Mobile App</a>, <a href="/Interact/Pages/Content/Document.aspx?id=7711" style="color:#fff;">Authentication</a></p>
</div>
<script>
$(document).ready(function()
{
  // Get the users name
  var yourname = $("#linkViewProfileName").text().split(' ')[0];
  $("#welcomename").html(yourname);
  
  $('#searchbtn').click(function(event)
  {
    event.preventDefault();
    if ($('#searchinput').val() == '')
    {
      if ($('.errorMsg').length == 0)
      {
        $('#popular').html('<p class="errorMsg top">Please enter a search term</p>');
      }
    }
    else
    {
      var target = $('#searchselect option:selected').val();
      var search = $("#searchinput").val();
      if (target == "1") window.location.href = 'https://developer.interactgo.com/Interact/Pages/Content/Search/Search.aspx?sectionid=3248' + '&' + 'q=' + search;
      else if (target == "2") window.location.href = 'https://developer.interactgo.com/Interact/Pages/Content/Search/Search.aspx?sectionid=1608&q=' + search;
    }
  });
  $('#searchinput').keypress(function(e)
  {
    if (e.which == 13)
    { //Enter key pressed
      $('#searchbtn').click(); //Trigger search button click event
    }
  });
});
</script>

Please note that for this to be implemented in your intranet, you need to modify the URLs to include your own domain, along with the sectionids for the content area you want to search.