how to create a efficient search bar

Posted In General
  • vishwas-saxena 2 years ago
    My search bar
    
    ```
    <div id="entername5" class="col-md-3"><input class =" form-control" id="task2" style="border-radius: 40px;height: 40px;" type="text" value="" name="task2"></div>
    
    <script type="text/javascript">
    $(function()
            {
                     $( "#task2" ).autocomplete({
                      source: "autocomplete",
                      minLength: 2,
                      select: function(event, ui) {
                              $('#task2').val(ui.item.value);
                      }
                    });
    
                    $('#task2').data( "ui-autocomplete" )._renderItem = function( ul, item )
                    {
                        var $li = $("<li style='width:150px;margin-left:10px;margin-bottom:5px'>"),
                            $img = $("<img style='width:20%'>");
    
                        $img.attr({
                          src: '{{ URL::to('/') }}/src/uploads/avatars/' + item.avatar,
                          alt: item.value
                    });
                    $li.attr('data-value', item.value);
                    $li.append("");
                    $li.append($img).append(""+item.value);    
                    return $li.appendTo(ul);
                    
                  };
    
            });
    
    </script>
    ```
    
    any suggestions and....@devdojo you should really make a video on seach bar

    My search bar

    <div id="entername5" class="col-md-3"><input class =" form-control" id="task2" style="border-radius: 40px;height: 40px;" type="text" value="" name="task2"></div>
    
    <script type="text/javascript">
    $(function()
            {
                     $( "#task2" ).autocomplete({
                      source: "autocomplete",
                      minLength: 2,
                      select: function(event, ui) {
                              $('#task2').val(ui.item.value);
                      }
                    });
    
                    $('#task2').data( "ui-autocomplete" )._renderItem = function( ul, item )
                    {
                        var $li = $("<li style='width:150px;margin-left:10px;margin-bottom:5px'>"),
                            $img = $("<img style='width:20%'>");
    
                        $img.attr({
                          src: '{{ URL::to('/') }}/src/uploads/avatars/' + item.avatar,
                          alt: item.value
                    });
                    $li.attr('data-value', item.value);
                    $li.append("");
                    $li.append($img).append(""+item.value);    
                    return $li.appendTo(ul);
                    
                  };
    
            });
    
    </script>
    

    any suggestions and....@devdojo you should really make a video on seach bar

  • mark 2 years ago
    What is the problem with it?

    What is the problem with it?

  • vishwas-saxena 2 years ago
    no problem with it @mark just want to have a look at different approaches .... that's why i created a discussion to discuss about this topic...
    @tony should really make a video  on it .......i can bet people would love to see your approach ......
    my whole devloper team is a fan on your videos @devdojo :)

    no problem with it @mark just want to have a look at different approaches .... that's why i created a discussion to discuss about this topic... @tony should really make a video on it .......i can bet people would love to see your approach ...... my whole devloper team is a fan on your videos @devdojo :)

Please login or signup to leave a response.

Login

or Sign Up

Sign Up

or Login
×
Want to create your own SAAS?

I can teach you to create your own Software as a Service. Click here to learn more!

Visit SAAS Adventure!