实现自动补全效果

最新推荐文章于 2021-06-01 05:58:20 发布

qq_36900615

最新推荐文章于 2021-06-01 05:58:20 发布

阅读量435

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_36900615/article/details/79799812

版权

第一种：HTML5属性（datalist）实现自动补全效果

车型选择：<input type="text" name="" list="jimmy" />
  <datalist id="jimmy">
   <option value="Porche 911">
  <option value="法拉利">
  <option value="奔驰 SL320">
  <option value="宝马 X5">
  <option value="悍马">
  <option value="兰博基尼">
  </datalist>

第二种：使用jqueryui插件实现自动补全效果

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成（Autocomplete） - 自定义数据并显示</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<style>
#project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
}
#project-icon {
    float: left;
    height: 32px;
    width: 32px;
}
#project-description {
    margin: 0;
    padding: 0;
}
</style>
<script>
$(function() {
    var projects = [
      {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
      }
    ];

    $( "#project" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

        return false;
      }
    })
    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
    };
});
</script>
</head>
<body>

<div id="project-label">选择一个项目（请键入 "j"）：</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>

</body>
</html>

//autocomplete参数设置

* minChars (Number):

在触发autoComplete前用户至少需要输入的字符数.Default: 1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表

* width (Number):

指定下拉框的宽度. Default: input元素的宽度

* max (Number):

autoComplete下拉显示项目的个数.Default: 10

* delay (Number):

击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10

* autoFill (Boolean):

要不要在用户选择时自动将用户当前鼠标所在的值填入到input框. Default: fal

最低0.47元/天解锁文章

qq_36900615

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现自动补全效果

第一种：HTML5属性（datalist）实现自动补全效果车型选择：&lt;input type="text" name="" list="jimmy" /&gt; &lt;datalist id="jimmy"&gt; &lt;option value="Porche 911"&gt; &lt;option value="法拉利&qu
复制链接

扫一扫