Question

我想在材料设计中实现一个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);

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

Answer 1

当您应用.easyAutocomplete(...)时，您的HTML结构将被修改

<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结构。

材料设计中的easyautocomplete

1 个答案: