那些遇到过的问题

如何向我的自定义构建自动完成添加预览文本？

Sub*_*ari 8 html javascript css jquery twitter-bootstrap

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

我的自动完成 我的自动完成

我想要的是

我想要的是

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

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

<!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>
Run Code Online (Sandbox Code Playgroud)

Ole*_*ruk 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();
        }

    });



});
Run Code Online (Sandbox Code Playgroud) 
.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);
}
}
Run Code Online (Sandbox Code Playgroud) 
<!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>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

429 次

最近记录：

5 年，8 月 前
相关归档
如何使用HTML在文档的每个打印页面上打印页眉和页脚？ 497
jQuery - 从所选选项中获取自定义属性 215
带有CSS的图像灰度和鼠标悬停时重新着色？ 84
从JQuery.ajax成功数据中解析JSON 72
什么是AMP HTML以及它如何适应框架/工具X？ 56
为什么不提升ES6课程？ 55
如何在sharepoint 2013中获取oauth访问令牌？ 26
网络工作者抛出'未捕获错误:DATA_CLONE_ERR:DOM异常25' 17
如何将整个引导面板作为超链接 12
角度材料对齐菜单右侧 3
难疑归档
如何重命名本地Git分支？ 8033
var functionName = function(){} vs function functionName(){} 6645
如何在JavaScript中检查empty/undefined/null字符串？ 2645
如何删除已合并的所有Git分支？ 1782
为什么在数组迭代中使用"for ... in"是一个坏主意？ 1761
application/x-www-form-urlencoded或multipart/form-data？ 1268
jQuery document.createElement等价？ 1226
如何使用jQuery设置/取消设置cookie？ 1209
Django会扩展吗？ 1101
如何配置Visual Studio代码以始终在新选项卡中打开文件？ 1078