YUI Auto Completeの使い方

YUIのAutoCompleteを使って、入力の補完をすることができます。
YUI AutoComplete http://developer.yahoo.com/yui/autocomplete/

YAHOO.widgetのDS_JSArrayは、DataSource JavaScript Arrayの略です。

Event.onDOMReadyにDOMの準備ができたら、補完のコードを実行してもらいます。

サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Yahoo! UI Library: AutoComplete</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<!--CSS file (default YUI Sam Skin) -->
	<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.3.0/build/autocomplete/assets/skins/sam/autocomplete.css">

	<!-- Dependencies -->
	<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

	<!-- OPTIONAL: Connection (required only if using XHR DataSource) -->
	<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/connection/connection-min.js"></script>

	<!-- OPTIONAL: Animation (required only if enabling animation) -->
	<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/animation/animation-min.js"></script>

	<!-- OPTIONAL: External JSON parser from http://www.json.org/ (enables JSON validation) -->
	<script type="text/javascript" src="http://www.json.org/json.js"></script>

	<!-- Source file -->
	<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/autocomplete/autocomplete-min.js"></script>

	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/assets/skins/sam/skin.css">

	<style type="text/css">
		#autocompleteID {width: 200px; }
	</style>
</head>

<body class="yui-skin-sam">
	<h1>AutoComplete</h1>
	<div id="autocompleteID">
		<input id="myInput" type="text">
		<div id="myContainer"></div>
	</div>
</body>

<script type="text/javascript">
	var Dom = YAHOO.util.Dom;
	var Event = YAHOO.util.Event;
	Event.onDOMReady (function(){
			var myArray1 = [
			"apple",
			"apricot",
			"banana",
			"buffer",
			"tomato",
			"tomono",
			"fa fa fa",
			"kaworu",
			"kaoru",
			];
			var myDataSource = new YAHOO.widget.DS_JSArray (myArray1);
			var myAutoComp = new YAHOO.widget.AutoComplete("myInput","myContainer", myDataSource);
			});
</script>
</html>

デモ
http://paranoid.dip.jp/dev/yahoo/yui/autocomplete.html
「a」を入力してみてください。

いつもシェア、ありがとうございます！

もっと情報を探しませんか？

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12