How do I add a preview text to my custom built autocomplete?

Tags:

I am trying to make my own custom input autocomplete API using Jquery and bootstrap 4. I want to show a preview of the list items text in the input filed whenever they are selected. I was able to do that by changing the value. However it was not what I wanted .

My Autocomlete My Autocomplete

What I want

What I want

I want a preview of the text in the input. How can I achieve that? I know there are several API that are able to do these. But I want to make my own. Is there a way to show preview in input or any method? I tried keeping a label in the input and then changing its value. But the label didn't align properly.

I have kept a rough version of my code in the snippet below.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
  <style>
    .list-group {
      margin-top: 10px;
      position: fixed;
      border-radius: 2px;
      max-height: 200px;
      background: rgb(255, 255, 255);
      overflow-y: auto;
      overflow-x: hidden;
      border: 1px solid rgb(238, 238, 238);
      box-shadow: 0px 10px 10px 2px #cbc8c8;

      padding: 4px 2px;

      z-index: 10;

    }


    .list-group::-webkit-scrollbar-track {

      border-radius: 2px;
      background-color: #bbbbbb;

    }

    .list-group::-webkit-scrollbar {
      width: 5px;

    }

    .list-group::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #6aa1ff;
    }

    /*
 *  STYLE 2
 */

    .loader {
      border: 2px solid #f3f3f3;
      border-radius: 50%;
      border-top: 2px solid #3498db;
      width: 30px;
      height: 30px;
      margin: 20px auto;
      -webkit-animation: spin 2s linear infinite;
      /* Safari */
      animation: spin 2s linear infinite;


    }

    /* Safari */

    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }
      rgb(215, 215, 215) 100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>

</head>

<body>
  <div style="height:20px;"></div>

  <div class="container">
    <div class="form-group col-6" style="margin: 0px auto">

      <input type="text" name="" value="" placeholder="Search" class="form-control my">
     
    </div>
    <!-- <div class="list-group">  <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur</a> <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>  <a href="#" class="list-group-itemlist-group-item-action ">Vestibulum at eros</a></div> -->

    <script>

      var data = [
      'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
      ];

      var searchData = [];
      function searchMe(string) {
        console.log("why");
        searchData = [];
        data.forEach((item) => {


          if (item.match(new RegExp(string, 'i')))
            searchData.push(highlight(item, string));

        });
        $('.list-group').html("<div class='loader'></div>");
        $('.list-group').html("");
        if(searchData.length)
        searchData.forEach(
          (item) => $('.list-group').append(' <a href="#" class="list-group-item list-group-item-action ">'+item+'</a>')
        );
        else {
          $('.list-group').html("<h4>No results found</h4>");
        }

      }


      function highlight(text, str) {
        return text.replace(new RegExp('(^|)(' + str + ')(|$)','ig'), '$1<b>$2</b>$3');

      }

      $(function() {



        let input;

        //enable or disable the autocomplete

        $('div').on('mouseenter', '.list-group a', function() {
          console.log('mousein');

          $('.list-group a.active').removeClass('active');
          $(this).addClass('active');
        }).on('mouseleave', '.list-group', function() {
          $('.list-group a.active').removeClass('active');

        });


        $(document).on('click', '.list-group a', function() {
          if (input) {
            input.val($(this).text());
          }

          $('.list-group').remove();
        });


        //autocomplete scroll and action on key up
        $('input.my').on('keyup', function(e) {

          console.log('From key up');
          console.log(e.which);
          let inLength = $(this).val().length;
          console.log(e.key);
          //!$('.list-group').length && inLength

          if (((e.key <= 'z' && e.key >= 'a') || (e.key >= 'A' && e.key <= 'Z') && e.key.length === 1) || e.which === 229) {
            if(!$('.list-group').length) {
            $(this).after(
              '<div class="list-group"> </div>'
            );
          }


          setTimeout(searchMe, 0,$(this).val());


            // $('.list-group').html(
            //
            //   //' <div ><h6 class="text-center text-secondary">Loading...</h6><div class="loader"></div></div> '
            //   ' <a href="#" class="list-group-item list-group-item-action ">Hari </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Subesh</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur</a> <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>  <a href="#" class="list-group-item list-group-item-action ">Vestibulum at eros</a>'
            // );

            let width = parseInt($(this).css('width'));
            if (width > parseInt($('.list-group').css('width'))) {
              console.log('width Changed: ' + width);
              $('.list-group').css('width', width);
            } else {
              console.log(width);
              console.log($('.list-group').css('width'));
            }

            console.log("Added list");
          } else if ($('.list-group').length) {

            //down press
            if (e.which === 40) {
              if (!$('.list-group a.active').length)
                $('.list-group').find('a').eq(0).addClass('active');
              else if ($('.list-group a.active').next().length) {
                $('.list-group a.active').removeClass('active').next().addClass('active');
              } else {
                console.log("Enter");
                $('.list-group a.active').removeClass('active').parent().children('a').eq(0).addClass('active');
                $('.list-group').scrollTop($('.list-group a.active').get(0).offsetTop);
              }

            }
            //up press
            else if (e.which === 38) {
              if (!$('.list-group a.active').length) {
                $('.list-group').find('a').eq(0).addClass('active');
                let text = $('.list-group a.active').text();
                $('label').html(text);
              } else if ($('.list-group a.active').prev().length) {
                $('.list-group a.active').removeClass('active').prev().addClass('active');
                let text = $('.list-group a.active').text();
                $('label').html(text);

              } else {
                $('.list-group').scrollTop($('.list-group a.active').get(0).offsetTop);
                $('.list-group a.active').removeClass('active');

              }


            }
            //enter or right keyPressed()
            else if (e.which === 39 || e.which === 13) {
              if ($('.list-group a.active').length)
                $(this).val($('.list-group a.active').text());

              $('.list-group ').remove();
            }
            //bacspace
            else if (e.which === 8) {
              //alert('Subesh');
              if ($(this).val() === "")
                $('.list-group ').remove();
            } else if (e.which === 27) {
              $('.list-group').remove();
            }

            //set the scroll pos
            if ($('.list-group a.active').prev().length)
              $('.list-group').scrollTop($('.list-group a.active').prev().get(0).offsetTop);

          } else {
            console.log('No list');
          }
        });



        $('input.my').on('focusin', function(e) {
          if ($(this) != input) {
            $('.list-group ').remove();
            input = $(this);
          }

        });



        $(':not(input)').on('click', function() {
          $('.list-group ').remove();
        });









        //keydown operation
        $('input.my').on('keydown', function(e) {
          console.log('From Down');
          console.log(e.which);
          let lastChar = $(this).val().length;
          //tab
          if (e.which === 9) {
            if ($('.list-group').length) {
              if ($('.list-group a.active').length) {
                $(this).val($('.list-group a.active').text());

                $('.list-group ').remove();
              } else {
                $('.list-group').find('a').eq(0).addClass('active');
                e.preventDefault();
                e.stopPropagation();
              }
            }
          }
          //up
          else if (e.which === 38) {
            e.preventDefault();
            e.stopPropagation();
          }

        });



      });
    </script>
</body>

</html>

279

asked Dec 24 '17 04:12

Subesh Bhandari

2 Answers

I was building an autocomplete based on this example and the solution provided by Alexander Poshtaruk helped me. But there was some minor glitch that happened when the user typed in a small case.
Label not aligning

The labels didn't align. To fix this I added a line

labelElem.html(text ? $(this).val() + text.slice(inLength) : '')

This will trim the characters already typed by the user and show the remaining. Aligned Label

This might help anyone else who might be wondering how to do it if facing the same scenario.

I also added code to remove the placeholder on string deletion.

var data = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Pennsylvania',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming',
]

var searchData = []
function searchMe(string) {
  searchData = []
  data.forEach(item => {
    if (item.match(new RegExp(string, 'i')))
      searchData.push(highlight(item, string))
  })
  $('.list-group').html("<div class='loader'></div>")
  $('.list-group').html('')
  if (searchData.length)
    searchData.forEach(item =>
      $('.list-group').append(
        ' <a href="#" class="list-group-item list-group-item-action ">' +
          item +
          '</a>'
      )
    )
  else {
    $('.list-group').html('<h4>No results found</h4>')
  }
}

function highlight(text, str) {
  return text.replace(
    new RegExp('(^|)(' + str + ')(|$)', 'ig'),
    '$1<b>$2</b>$3'
  )
}

$(function() {
  let input

  //enable or disable the autocomplete

  $('div')
    .on('mouseenter', '.list-group a', function() {
      console.log('mousein')

      $('.list-group a.active').removeClass('active')
      $(this).addClass('active')
    })
    .on('mouseleave', '.list-group', function() {
      $('.list-group a.active').removeClass('active')
    })

  $(document).on('click', '.list-group a', function() {
    if (input) {
      input.val($(this).text())
    }

    $('.list-group').remove()
  })

  //autocomplete scroll and action on key up
  $('input.my').on('keyup', function(e) {
    console.log('From key up')
    console.log(e.which)
    let inLength = $(this).val().length
    console.log(e.key)

    let labelElem = $('.label-text')
    console.log('labelElem:', labelElem)

    if (
      (e.key <= 'z' && e.key >= 'a') ||
      (e.key >= 'A' && e.key <= 'Z' && e.key.length === 1) ||
      e.which === 229
    ) {
      if (!$('.list-group').length) {
        $(this).after('<div class="list-group"> </div>')
      }

      setTimeout(searchMe, 0, $(this).val())
      labelElem.html('')
      // $('.list-group').html(
      //
      //   //' <div ><h6 class="text-center text-secondary">Loading...</h6><div class="loader"></div></div> '
      //   ' <a href="#" class="list-group-item list-group-item-action ">Hari </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Subesh</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur</a> <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>  <a href="#" class="list-group-item list-group-item-action ">Vestibulum at eros</a>'
      // );

      let width = parseInt($(this).css('width'))
      if (width > parseInt($('.list-group').css('width'))) {
        console.log('width Changed: ' + width)
        $('.list-group').css('width', width)
      } else {
        console.log(width)
        console.log($('.list-group').css('width'))
      }

      console.log('Added list')
    } else if ($('.list-group').length) {
      //down press
      if (e.which === 40) {
        if (!$('.list-group a.active').length)
          $('.list-group')
            .find('a')
            .eq(0)
            .addClass('active')
        else if ($('.list-group a.active').next().length) {
          $('.list-group a.active')
            .removeClass('active')
            .next()
            .addClass('active')
        } else {
          console.log('Enter')
          $('.list-group a.active')
            .removeClass('active')
            .parent()
            .children('a')
            .eq(0)
            .addClass('active')
          $('.list-group').scrollTop($('.list-group a.active').get(0).offsetTop)
        }
        let text = $('.list-group a.active').text()
        labelElem.html(text ? $(this).val() + text.slice(inLength) : '')
      }
      //up press
      else if (e.which === 38) {
        if (!$('.list-group a.active').length) {
          $('.list-group')
            .find('a')
            .eq(0)
            .addClass('active')
          let text = $('.list-group a.active').text()
          $('label').html(text)
          labelElem.html(text ? $(this).val() + text.slice(inLength) : '')
        } else if ($('.list-group a.active').prev().length) {
          $('.list-group a.active')
            .removeClass('active')
            .prev()
            .addClass('active')
          let text = $('.list-group a.active').text()
          $('label').html(text)
          labelElem.html(text ? $(this).val() + text.slice(inLength) : '')
        } else {
          $('.list-group').scrollTop($('.list-group a.active').get(0).offsetTop)
          $('.list-group a.active').removeClass('active')
        }
      }
      //enter or right keyPressed()
      else if (e.which === 39 || e.which === 13) {
        if ($('.list-group a.active').length)
          var value = $('.list-group a.active').text()
        $(this).val(value)
        console.log('value for aoutocomplete:', value)

        $('.list-group ').remove()
      }
      //bacspace
      else if (e.which === 8) {
        //alert('Subesh');
        if ($(this).val() === '') {
          labelElem.html("")
          $('.list-group ').remove()
        }
      } else if (e.which === 27) {
        $('.list-group').remove()
      }

      //set the scroll pos
      if ($('.list-group a.active').prev().length)
        $('.list-group').scrollTop(
          $('.list-group a.active')
            .prev()
            .get(0).offsetTop
        )
    } else {
      console.log('No list')
    }
  })

  $('input.my').on('focusin', function(e) {
    if ($(this) != input) {
      $('.list-group ').remove()
      input = $(this)
    }
  })

  $(':not(input)').on('click', function() {
    $('.list-group ').remove()
  })

  //keydown operation
  $('input.my').on('keydown', function(e) {
    console.log('From Down')
    console.log(e.which)
    let lastChar = $(this).val().length
    //tab
    if (e.which === 9) {
      if ($('.list-group').length) {
        if ($('.list-group a.active').length) {
          $(this).val($('.list-group a.active').text())

          $('.list-group ').remove()
        } else {
          $('.list-group')
            .find('a')
            .eq(0)
            .addClass('active')
          e.preventDefault()
          e.stopPropagation()
        }
      }
    }
    //up
    else if (e.which === 38) {
      e.preventDefault()
      e.stopPropagation()
    }
  })
})

.list-group {
    margin-top: 10px;
    position: fixed;
    border-radius: 2px;
    max-height: 200px;
    background: rgb(255, 255, 255);
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid rgb(238, 238, 238);
    box-shadow: 0px 10px 10px 2px #cbc8c8;

    padding: 4px 2px;

    z-index: 10;

}


.list-group::-webkit-scrollbar-track {

    border-radius: 2px;
    background-color: #bbbbbb;

}

.list-group::-webkit-scrollbar {
    width: 5px;

}

.list-group::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #6aa1ff;
}

.label-text {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid red;
    margin: 0 15px;
    padding: .375rem .75rem;
    color: silver;
    z-index: -1;
}
.my {
    z-index: 2;
    background-color: transparent !important;
}

/*
 *  STYLE 2
 */

.loader {
    border: 2px solid #f3f3f3;
    border-radius: 50%;
    border-top: 2px solid #3498db;
    width: 30px;
    height: 30px;
    margin: 20px auto;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;


}

/* Safari */

@-webkit-keyframes spin {
    0% {
    -webkit-transform: rotate(0deg);
}
    rgb(215, 215, 215) 100% {
    -webkit-transform: rotate(360deg);
}
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
}
    100% {
        transform: rotate(360deg);
}
}

<!doctype html>
<html lang="en">

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

</head>

<body>
<div style="height:20px;"></div>

    <div class="container">
    <div class="form-group col-6" style="margin: 0px auto">

    <span>
    <input type="text" name="" value="" placeholder="Search" class="form-control my">
    <div class="label-text"></div>
    </span>


    </div>
    <!-- <div class="list-group">  <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur</a> <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>  <a href="#" class="list-group-itemlist-group-item-action ">Vestibulum at eros</a></div> -->

</body>

</html>

121

answered Sep 21 '22 05:09

Slash Bash

Tried to absolutely position label element, and seems good for me. Of cause I didn't put code for mouse events and for words in list which start with another letter but contain sequence, but i guess the idea is clear enough (tested in Chrome):

var data = [
    'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
    'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
    'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
    'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
    'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
    'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

var searchData = [];
function searchMe(string) {
    console.log("why");
    searchData = [];
    data.forEach((item) => {


        if (item.match(new RegExp(string, 'i')))
    searchData.push(highlight(item, string));

});
    $('.list-group').html("<div class='loader'></div>");
    $('.list-group').html("");
    if(searchData.length)
        searchData.forEach(
            (item) => $('.list-group').append(' <a href="#" class="list-group-item list-group-item-action ">'+item+'</a>')
);
else {
        $('.list-group').html("<h4>No results found</h4>");
    }

}


function highlight(text, str) {
    return text.replace(new RegExp('(^|)(' + str + ')(|$)','ig'), '$1<b>$2</b>$3');

}

$(function() {



    let input;

    //enable or disable the autocomplete

    $('div').on('mouseenter', '.list-group a', function() {
        console.log('mousein');

        $('.list-group a.active').removeClass('active');
        $(this).addClass('active');
    }).on('mouseleave', '.list-group', function() {
        $('.list-group a.active').removeClass('active');

    });


    $(document).on('click', '.list-group a', function() {
        if (input) {
            input.val($(this).text());
        }

        $('.list-group').remove();
    });


    //autocomplete scroll and action on key up
    $('input.my').on('keyup', function(e) {

        console.log('From key up');
        console.log(e.which);
        let inLength = $(this).val().length;
        console.log(e.key);

        let labelElem = $('.label-text');
        console.log('labelElem:', labelElem);

        if (((e.key <= 'z' && e.key >= 'a') || (e.key >= 'A' && e.key <= 'Z') && e.key.length === 1) || e.which === 229) {
            if(!$('.list-group').length) {
                $(this).after(
                    '<div class="list-group"> </div>'
                );
            }


            setTimeout(searchMe, 0,$(this).val());


            // $('.list-group').html(
            //
            //   //' <div ><h6 class="text-center text-secondary">Loading...</h6><div class="loader"></div></div> '
            //   ' <a href="#" class="list-group-item list-group-item-action ">Hari </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Subesh</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur</a> <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>  <a href="#" class="list-group-item list-group-item-action ">Vestibulum at eros</a>'
            // );

            let width = parseInt($(this).css('width'));
            if (width > parseInt($('.list-group').css('width'))) {
                console.log('width Changed: ' + width);
                $('.list-group').css('width', width);
            } else {
                console.log(width);
                console.log($('.list-group').css('width'));
            }

            console.log("Added list");
        } else if ($('.list-group').length) {

            //down press
            if (e.which === 40) {
                if (!$('.list-group a.active').length)
                    $('.list-group').find('a').eq(0).addClass('active');
                else if ($('.list-group a.active').next().length) {
                    $('.list-group a.active').removeClass('active').next().addClass('active');
                } else {
                    console.log("Enter");
                    $('.list-group a.active').removeClass('active').parent().children('a').eq(0).addClass('active');
                    $('.list-group').scrollTop($('.list-group a.active').get(0).offsetTop);
                }
              let text = $('.list-group a.active').text();
                labelElem.html(text);

            }
            //up press
            else if (e.which === 38) {
                if (!$('.list-group a.active').length) {
                    $('.list-group').find('a').eq(0).addClass('active');
                    let text = $('.list-group a.active').text();
                    $('label').html(text);
                    labelElem.html(text);
                } else if ($('.list-group a.active').prev().length) {
                    $('.list-group a.active').removeClass('active').prev().addClass('active');
                    let text = $('.list-group a.active').text();
                    $('label').html(text);
                    labelElem.html(text);
                } else {
                    $('.list-group').scrollTop($('.list-group a.active').get(0).offsetTop);
                    $('.list-group a.active').removeClass('active');

                }


            }
            //enter or right keyPressed()
            else if (e.which === 39 || e.which === 13) {
                if ($('.list-group a.active').length)
                    var value = $('.list-group a.active').text();
                    $(this).val(value);
                    console.log('value for aoutocomplete:', value)

                $('.list-group ').remove();
            }
            //bacspace
            else if (e.which === 8) {
                //alert('Subesh');
                if ($(this).val() === "")
                    $('.list-group ').remove();
            } else if (e.which === 27) {
                $('.list-group').remove();
            }

            //set the scroll pos
            if ($('.list-group a.active').prev().length)
                $('.list-group').scrollTop($('.list-group a.active').prev().get(0).offsetTop);

        } else {
            console.log('No list');
        }
    });



    $('input.my').on('focusin', function(e) {
        if ($(this) != input) {
            $('.list-group ').remove();
            input = $(this);
        }

    });



    $(':not(input)').on('click', function() {
        $('.list-group ').remove();
    });









    //keydown operation
    $('input.my').on('keydown', function(e) {
        console.log('From Down');
        console.log(e.which);
        let lastChar = $(this).val().length;
        //tab
        if (e.which === 9) {
            if ($('.list-group').length) {
                if ($('.list-group a.active').length) {
                    $(this).val($('.list-group a.active').text());

                    $('.list-group ').remove();
                } else {
                    $('.list-group').find('a').eq(0).addClass('active');
                    e.preventDefault();
                    e.stopPropagation();
                }
            }
        }
        //up
        else if (e.which === 38) {
            e.preventDefault();
            e.stopPropagation();
        }

    });



});

.list-group {
    margin-top: 10px;
    position: fixed;
    border-radius: 2px;
    max-height: 200px;
    background: rgb(255, 255, 255);
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid rgb(238, 238, 238);
    box-shadow: 0px 10px 10px 2px #cbc8c8;

    padding: 4px 2px;

    z-index: 10;

}


.list-group::-webkit-scrollbar-track {

    border-radius: 2px;
    background-color: #bbbbbb;

}

.list-group::-webkit-scrollbar {
    width: 5px;

}

.list-group::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #6aa1ff;
}

.label-text {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid red;
    margin: 0 15px;
    padding: .375rem .75rem;
    color: silver;
    z-index: -1;
}
.my {
    z-index: 2;
    background-color: transparent !important;
}

/*
 *  STYLE 2
 */

.loader {
    border: 2px solid #f3f3f3;
    border-radius: 50%;
    border-top: 2px solid #3498db;
    width: 30px;
    height: 30px;
    margin: 20px auto;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;


}

/* Safari */

@-webkit-keyframes spin {
    0% {
    -webkit-transform: rotate(0deg);
}
    rgb(215, 215, 215) 100% {
    -webkit-transform: rotate(360deg);
}
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
}
    100% {
        transform: rotate(360deg);
}
}

<!doctype html>
<html lang="en">

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

</head>

<body>
<div style="height:20px;"></div>

    <div class="container">
    <div class="form-group col-6" style="margin: 0px auto">

    <span>
    <input type="text" name="" value="" placeholder="Search" class="form-control my">
    <div class="label-text">Alabama</div>
    </span>


    </div>
    <!-- <div class="list-group">  <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur</a> <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>  <a href="#" class="list-group-itemlist-group-item-action ">Vestibulum at eros</a></div> -->

</body>

</html>

answered Sep 19 '22 05:09

Alexander Poshtaruk

Related questions
                            
                                How to avoid prototype pollution in javascript?
                            
                                use forEach() with promises while access previous promise results in a .then() chain?
                            
                                Testing recompose's HOC with enzyme
                            
                                How open link in safari mobile app from webview
                            
                                How to programmatically test if ngrok is already running
                            
                                Electron protocol handler not working on windows
                            
                                Create file based on buffer data in nodejs
                            
                                electron dialog box not preventing interaction with page
                            
                                Run git push from javascript hosted in static site
                            
                                Getting intellisense on function parameter object types in javascript in vs code
                            
                                How to debug timed out waiting for asynchronous Angular tasks? Failure to find elements on angular page occurring
                            
                                firebase docs reference grecaptcha but never import or define it
                            
                                filter() returns empty array
                            
                                Can't make socket.io work on HTTPS
                            
                                Select triggers MouseLeave event on parent element in Mozilla Firefox
                            
                                React 16 Error Boundary component (using componentDidCatch) shows uncaught error
                            
                                How to show a dynamic content in the same page using Angularjs 1.6?
                            
                                Add properties to JavaScript Error object?
                            
                                How to avoid bundling mock modules on Webpack build?
                            
                                Why do some types in Flow libdefs have dollar sign in the begining

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With

How do I add a preview text to my custom built autocomplete?

Tags:

javascript

html

jquery

css

twitter-bootstrap

Subesh Bhandari

People also ask

2 Answers

Slash Bash

Alexander Poshtaruk

Recent Activity

Donate For Us