Search Pop Out Icon: Like Apple.com Angular JS

Question

I am trying to create the same interactive searchbar as apple.com (and I know that there are many other posts that ask similar questions), and I am trying to use JS to toggle the searchbar.

My approach was with JQuery:

    // inserts a new search_bar
    $(".glyphicon.glyphicon-search").on("click", function(){
      var search_bar = document.createElement("input");
      search_bar.setAttribute("type", "text");
      search_bar.setAttribute("class", "form-control search left rounded");
      search_bar.setAttribute("id", "search-bar");
      search_bar.setAttribute("placeholder", "search");
      search_bar.setAttribute("ng-model", "search.name");

      $(this).parent().replaceWith(search_bar);

    });

HTML:

  <span class="glyphicon glyphicon-search" style="color:white;"></span>

This function replaces the search glyphicon with the search (input tag) bar upon click. But I need a good way to snap the search bar back the the search glyphicon upon clicking else where.

Any Ideas?

Fiddle: http://jsfiddle.net/w9pwh7fr/1/

Update:

Using $('html').on("click", function() {}) seems to work for the off click and event.stopPropagation to prevent clicking on glyphicon to trigger both events.

Slight problem now with the search only toggling once. Upon first execution.

Updated Fiddle: http://jsfiddle.net/w9pwh7fr/3/

Updated fiddle, check it out. But the problem is the off click only works once. If you repeat it again, the element will not toggle correctly. Fiddle: http://jsfiddle.net/w9pwh7fr/3/ — Ninja, Oct 20 '14 at 18:36

score 0 · Answer 1 · edited May 23 '17 at 10:33

You could use $('body').click(function(){}); to check for a click on the page.

However, this will also detect a click on the search box. So, you are going to need to detect a click on the page, except for that box. This can be achieved with something like $('body').on('click', ':not(#popup)', function(){});.

In addition, this link gives the answer for your clicking events only working once. Basically, you removed the bound handlers, so you need to put them back.

All in all, $('body').on('click', ':not(#popup)','.glyphicon.glyphicon-search', function(){}); should work for you!

score 0 · Answer 2 · answered Oct 20 '14 at 18:50

Perfect, just fixed it thanks to some suggestions online.

Updated Fiddle:

http://jsfiddle.net/w9pwh7fr/4/

Solution:

Used .hide() and .show() to toggle the search bar and search icon. Used "html".onClick() to solve the problem of clicking off the button.

   $(".glyphicon.glyphicon-search").on("click", function(e){

     $(this).hide();
     $(".form-control.search").show();
     e.stopPropagation();

   });


   $('html').on("click", function() {

     $(".form-control.search").hide();
     $(".glyphicon.glyphicon-search").show();

   });

the `$('html').on("click" ...` will be any click on your page, even in the search box. Check out my answer for the fix. — starvator, Oct 20 '14 at 18:52

score 0 · Answer 3 · answered Oct 20 '14 at 19:15

0

why you don't use ".focusout()" on the input text field... show when the user clicks anywhere else you can close or restore that element to the icon only!

answered Oct 20 '14 at 19:15

Allan

261
1
7

Search Pop Out Icon: Like Apple.com Angular JS

3 Answers3