Question

我正在尝试使用Jquery和bootstrap 4创建自己的自定义输入自动完成API。我想在选择输入字段时显示列表项文本的预览。我能够通过改变价值来做到这一点。然而，这不是我想要的。

我的Autocomlete

我想要什么

我想在输入中预览文本。我怎样才能做到这一点？我知道有几个API可以做到这些。但我想做自己的。有没有办法在输入或任何方法中显示预览？我尝试在输入中保留一个标签，然后更改其值。但标签没有正确对齐。

我在下面的代码段中保留了我的代码的粗略版本。

＆＃13;

<!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>

＆＃13;

Answer 1

我正在基于此示例构建自动完成功能，Alexander Poshtaruk提供的解决方案帮助了我。但是，当用户输入小写字母时，会出现一些小故障。
Label not aligning

标签未对齐。为了解决这个问题，我添加了一行

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

这将修剪用户已经键入的字符并显示其余字符。 Aligned Label

如果遇到相同的情况，这可能会帮助其他想知道如何做的人。

我还添加了代码，以删除字符串删除中的占位符。

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>

Answer 2

试图绝对定位标签元素，对我来说似乎很好。因为我没有为鼠标事件和列表中的单词添加代码，这些代码以另一个字母开头但包含序列，但我想这个想法已经足够清楚了（在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>

Answer 3

使用其他输入文本框代替标签。

使用css，将辅助输入框放在主要输入框后面。使用额外的css，使主盒（前面的那个）具有透明背景。

然后，您可以根据需要使用列表中顶部选择的完整值设置帮助框（后面的那个）的值（或占位符文本）。

<input type="text" id="searchhelper" name="searchhelper" value="" placeholder="Search" class="form-control my" style="color:#dddddd;margin-bottom:-38px;">

**注意：还需要根据用户输入的内容重新组织帮助文本，因为它们可能会更改结果文本的大小写（上/下）。所以基本上，用户输入的字母+辅助字的剩余字母

或者，为了简化，使用css text-transform: uppercase;使所有文本大写（如果不是绝对必需的小写）

如何将预览文本添加到自定义构建的自动完成中？

3 个答案: