问easyautocomplete材料设计
EN

Stack Overflow用户

提问于 2018-06-28 19:15:02

回答 1查看 305关注 0票数 0

我想在材料设计中实现一个html输入域。为此，我有以下代码：

/*
 * easy-autocomplete
 * jQuery plugin for autocompletion
 * 
 * @author Łukasz Pawełczak (http://github.com/pawelczak)
 * @version 1.3.5
 * Copyright  License: 
 */




	


.group { 
margin: 48px;
  position:relative; 
}
input {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus { outline:none; }



/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

<script src="http://easyautocomplete.com/dist/jquery.easy-autocomplete.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>	
	<body>

    <div class="group">      
      <input id="acInput" type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
    </div>

	</body>
</html>

这样做效果很好。但现在我想做一个自动完成输入栏，其中也有材料设计

为此，我添加了几行javascript

var options = {
   data: ["Max Mustermann","Peter Parr"],
};
$("#acInput").easyAutocomplete(options);

结果是好的，但并不完美。自动完成工程，但没有材料设计。我的错误在哪里？

javascript

html

回答 1

Stack Overflow用户

发布于 2018-06-28 20:36:18

当你应用.easyAutocomplete(...)时，你的超文本标记语言结构被修改了

<div class="group">
    <div class="easy-autocomplete" style="width: 315px;">
        <input id="acInput" type="text" required="" autocomplete="off">
        <div class="easy-autocomplete-container" id="eac-container-acInput">
            <ul style="display: none;">
                <li>
                    <div class="eac-item">Max Mustermann</div>
                </li>
                <li>
                    <div class="eac-item">Peter Parr</div>
                </li>
            </ul>
        </div>
    </div>
    <span class="highlight"></span>
    <span class="bar"></span>
</div>

您需要更新css以匹配新的HTML结构。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51081511

复制

相似问题

问easyautocomplete材料设计
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问easyautocomplete材料设计EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问easyautocomplete材料设计
EN