自动完成输入框，没有任何图标

Question

如何从jQuery移动列表视图过滤器中隐藏搜索图标。

我想使用像Auto Complete输入框一样没有任何图标。

Answer 1

自动完成输入框，没有任何图标

<DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <style>
        .ui-input-search .ui-input-clear {display: none;}
        .ui-icon-searchfield: after {display: none;}
    </style>        
</head>
<body>
    <div data-role="page" id="myPage1">
        <div data-role="content" id="content">
            <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
                <li><a href="#">Acura</a>
                </li>
                <li><a href="#">Audi</a>
                </li>
                <li><a href="#">BMW</a>
                </li>
                <li><a href="#">Cadillac</a>
                </li>
                <li><a href="#">Chrysler</a>
                </li>
                <li><a href="#">Dodge</a>
                </li>
                <li><a href="#">Ferrari</a>
                </li>
                <li><a href="#">Ford</a>
                </li>
                <li><a href="#">GMC</a>
                </li>
                <li><a href="#">Honda</a>
                </li>
                <li><a href="#">Hyundai</a>
                </li>
                <li><a href="#">Infiniti</a>
                </li>
                <li><a href="#">Jeep</a>
                </li>
                <li><a href="#">Kia</a>
                </li>
                <li><a href="#">Lexus</a>
                </li>
                <li><a href="#">Mini</a>
                </li>
                <li><a href="#">Nissan</a>
                </li>
                <li><a href="#">Porsche</a>
                </li>
                <li><a href="#">Subaru</a>
                </li>
                <li><a href="#">Toyota</a>
                </li>
                <li><a href="#">Volkswagen</a>
                </li>
                <li><a href="#">Volvo</a>
                </li>
            </ul>
        </div>
    </div>
  </body>
</html>

Answer 2

我会更改输入字段的填充，然后将图标设置为不显示：

.ui-input-search {
  padding: 0 .4em !important;
}

.ui-icon-searchfield:after {
  display: none !important;
}

隐藏搜索图标jQuery移动列表视图过滤器

2 个答案:

自动完成输入框，没有任何图标