Rumah > hujung hadapan web > tutorial js > javascript代码实现input输入框模糊提示功能

javascript代码实现input输入框模糊提示功能

小云云
Lepaskan: 2018-02-01 13:10:46
asal
2205 orang telah melayarinya

本文主要和大家介绍javascript input输入框模糊提示功能的实现的相关资料,希望通过本能帮助到大家,需要的朋友可以参考下,希望能帮助到大家。

javascript input输入框模糊提示功能的实现

主要用到了jQuery.autocomplete函数,定义好一个数组就可以用这个功能了,很方便。


<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="external nofollow" >
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <script>
 $(function() {
  var availableTags = [
   "James",
   "Kobe",
   "Jordan"
  ];
  $( "#tags" ).autocomplete({
   source: availableTags
  });
 });
 </script>
</head>
<body>

<p class="ui-widget">
 <label for="tags">Tags: </label>
 <input id="tags">
</p>

</body>
Salin selepas log masuk

效果:

相关推荐:

input标签输入框带提示文字方法

Vue实现数字输入框中分割手机号码实例教程

JS点击下拉菜单把选择的内容同步到input输入框内实现方法

Atas ialah kandungan terperinci javascript代码实现input输入框模糊提示功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan