Get dom element in angular directive using jquery find

I am trying to implement a search box similar to what Google News. Basically when you type a search terms, you get two options in the drop down to allow you to search either in news or the whole web.

enter image description here

I know that there are many select plugins such as select2, but I don't really think that they are the right solution because they are designed for selecting options.

I would really appreciate it if someone can shed some light and point me to the right direction before I put something hacky. Thanks!

Answers 1

  • Well its a little jquery job no plugin needed here is the code.

    Just create a textbox and a div with two lines which will show in input click and then change text of that li's with the text change in textbox and here is the result : http://codepen.io/yudircks/pen/Raxabd.

    Here is the used code below

    HTML

    <script   src="https://code.jquery.com/jquery-1.12.3.min.js"   integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"></script>
    <div class="search_cont">
      <input type="text">
      <div class="result_optins">
        <ul>
          <li><span></span>-Search news</li>
          <li><span></span>-Search the web</li>
        </ul>
      </div>
    </div>
    

    CSS

    *{
        box-sizing:border-box;
    }
    body{
      font-family:arial;
    }
    .search_cont input{
      width:300px;
      height:30px;
      padding:10px;
    }
    .search_cont .result_optins{
      width:300px;
      display:none;
    }
    .search_cont .result_optins ul{
      padding:0;
      margin:0;
    }
    .search_cont .result_optins ul li{
      list-style:none;
      padding:5px;
      border:1px solid #999;
      color:#aaa;
    }
    .search_cont .result_optins ul li span{
      color:#777
    }
    

    JQUERY

    $(document).ready(function(){
        $('input').on('click', function(e){
        e.stopPropagation();
        $('.result_optins').show();
      });
      $('.result_optins').on('click', function(e){
        e.stopPropagation();
      })
      $('input').on('input propertychange', function(e){
        var inputVal = $(this).val();
        $('.result_optins ul li').each(function(){
            $(this).find('span').text(inputVal);
        })
      });
      $(document).on('click', function(){
        $('.result_optins').hide();
      })
    })
    

Related Articles