JavaScript DHTML/Scriptaculous/autocompleter

Материал из Web эксперт
Версия от 10:26, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

An incremental Ajax autocompleter

   <source lang="html4strict">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <title>script.aculo.us Autocompleter functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
 <style type="text/css" media="screen">
   .selected { background-color: #888; }
 </style>

</head> <body>

script.aculo.us Autocompleter functional test file

This is an incremental Ajax autocompleter. Type something, then type a comma, than type more. This autocompleter features an indicator.

Autocompleter ac1: <input type="text" id="ac1" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac1","ac1update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html", { 
   tokens: ",", indicator: "ac1_indicator"
 } );

</script>

Non-incremental Ajax autocompleter.
Autocompleter ac2: <input id="ac2" type="text" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac2","ac2update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html");

</script>

Non-incremental Ajax autocompleter.
Autocompleter ac3: <input id="ac3" type="text" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac3","ac3update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html");

</script>

Local incremental array autocompleter ac4
with full-search. Type "Jac", hit enter a few
times, type "gne".
<textarea rows=5 cols=40 id="ac4" autocomplete="off"></textarea>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Autocompleter.Local("ac4","ac4update",
 new Array("John Jackson", "", "Jack Johnson", "", "Jane Agnews"), { tokens: new Array(",","\n"), fullSearch: true, partialSearch: true });

</script>

Local incremental array autocompleter ac5
with fixed height and scrollbar. Type "Jac", hit enter a few
times, type "gne".
<input id="ac5" type="text" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Autocompleter.Local("ac5","ac5update",
 new Array("John Jackson", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews"), { tokens: new Array(",","\n"), fullSearch: true, partialSearch: true });

</script>







</body> </html> 

 </source>


Autocompleter: autoselects option if single single option is returned

   <source lang="html4strict">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <title>script.aculo.us Autocompleter functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
 <style type="text/css" media="screen">
   .selected { background-color: #888; }
 </style>

</head> <body>

script.aculo.us Autocompleter functional test file

Autocompleter ac1 (updated panel is relative, so no overlapping should occur): <input id="ac1" name="ac1" type="text"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac1","ac1update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html");

</script>
Autocompleter ac2 w/ parameters: <input id="ac2" type="text" name="ac2"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac2","ac2update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html",{parameters:"a=b&b=c"});

</script>
Autocompleter ac3 (nested in postion:relative div, selects "selectme" class):

<input id="ac3" type="text"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac3","ac3update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html",{select:"selectme"});

</script>
<select><option>First Item</option><option>Second Item</option><option>Third Item</option></select>

Autocompleter ac4 (autoselects option if single single option is returned):
<input id="ac4" type="text"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac4","ac4update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result_single.html",{select:"selectme",autoSelect:true});

</script>

</body> </html> 

 </source>


Autocompleter: nested in postion:relative div, selects "selectme" class

   <source lang="html4strict">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <title>script.aculo.us Autocompleter functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
 <style type="text/css" media="screen">
   .selected { background-color: #888; }
 </style>

</head> <body>

script.aculo.us Autocompleter functional test file

Autocompleter ac1 (updated panel is relative, so no overlapping should occur): <input id="ac1" name="ac1" type="text"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac1","ac1update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html");

</script>
Autocompleter ac2 w/ parameters: <input id="ac2" type="text" name="ac2"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac2","ac2update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html",{parameters:"a=b&b=c"});

</script>
Autocompleter ac3 (nested in postion:relative div, selects "selectme" class):

<input id="ac3" type="text"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac3","ac3update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html",{select:"selectme"});

</script>
<select><option>First Item</option><option>Second Item</option><option>Third Item</option></select>

Autocompleter ac4 (autoselects option if single single option is returned):
<input id="ac4" type="text"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac4","ac4update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result_single.html",{select:"selectme",autoSelect:true});

</script>

</body> </html> 

 </source>


Autocompleter: updated panel is relative, so no overlapping should occur

   <source lang="html4strict">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <title>script.aculo.us Autocompleter functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
 <style type="text/css" media="screen">
   .selected { background-color: #888; }
 </style>

</head> <body>

script.aculo.us Autocompleter functional test file

Autocompleter ac1 (updated panel is relative, so no overlapping should occur): <input id="ac1" name="ac1" type="text"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac1","ac1update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html");

</script>
Autocompleter ac2 w/ parameters: <input id="ac2" type="text" name="ac2"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac2","ac2update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html",{parameters:"a=b&b=c"});

</script>
Autocompleter ac3 (nested in postion:relative div, selects "selectme" class):

<input id="ac3" type="text"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac3","ac3update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html",{select:"selectme"});

</script>
<select><option>First Item</option><option>Second Item</option><option>Third Item</option></select>

Autocompleter ac4 (autoselects option if single single option is returned):
<input id="ac4" type="text"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac4","ac4update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result_single.html",{select:"selectme",autoSelect:true});

</script>

</body> </html> 

 </source>


Local incremental array autocompleter with fixed height and scrollbar.

   <source lang="html4strict">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <title>script.aculo.us Autocompleter functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
 <style type="text/css" media="screen">
   .selected { background-color: #888; }
 </style>

</head> <body>

script.aculo.us Autocompleter functional test file

This is an incremental Ajax autocompleter. Type something, then type a comma, than type more. This autocompleter features an indicator.

Autocompleter ac1: <input type="text" id="ac1" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac1","ac1update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html", { 
   tokens: ",", indicator: "ac1_indicator"
 } );

</script>

Non-incremental Ajax autocompleter.
Autocompleter ac2: <input id="ac2" type="text" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac2","ac2update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html");

</script>

Non-incremental Ajax autocompleter.
Autocompleter ac3: <input id="ac3" type="text" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac3","ac3update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html");

</script>

Local incremental array autocompleter ac4
with full-search. Type "Jac", hit enter a few
times, type "gne".
<textarea rows=5 cols=40 id="ac4" autocomplete="off"></textarea>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Autocompleter.Local("ac4","ac4update",
 new Array("John Jackson", "", "Jack Johnson", "", "Jane Agnews"), { tokens: new Array(",","\n"), fullSearch: true, partialSearch: true });

</script>

Local incremental array autocompleter ac5
with fixed height and scrollbar. Type "Jac", hit enter a few
times, type "gne".
<input id="ac5" type="text" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Autocompleter.Local("ac5","ac5update",
 new Array("John Jackson", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews"), { tokens: new Array(",","\n"), fullSearch: true, partialSearch: true });

</script>







</body> </html> 

 </source>


Local incremental array autocompleter with full-search.

   <source lang="html4strict">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <title>script.aculo.us Autocompleter functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
 <style type="text/css" media="screen">
   .selected { background-color: #888; }
 </style>

</head> <body>

script.aculo.us Autocompleter functional test file

This is an incremental Ajax autocompleter. Type something, then type a comma, than type more. This autocompleter features an indicator.

Autocompleter ac1: <input type="text" id="ac1" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac1","ac1update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html", { 
   tokens: ",", indicator: "ac1_indicator"
 } );

</script>

Non-incremental Ajax autocompleter.
Autocompleter ac2: <input id="ac2" type="text" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac2","ac2update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html");

</script>

Non-incremental Ajax autocompleter.
Autocompleter ac3: <input id="ac3" type="text" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac3","ac3update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html");

</script>

Local incremental array autocompleter ac4
with full-search. Type "Jac", hit enter a few
times, type "gne".
<textarea rows=5 cols=40 id="ac4" autocomplete="off"></textarea>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Autocompleter.Local("ac4","ac4update",
 new Array("John Jackson", "", "Jack Johnson", "", "Jane Agnews"), { tokens: new Array(",","\n"), fullSearch: true, partialSearch: true });

</script>

Local incremental array autocompleter ac5
with fixed height and scrollbar. Type "Jac", hit enter a few
times, type "gne".
<input id="ac5" type="text" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Autocompleter.Local("ac5","ac5update",
 new Array("John Jackson", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews"), { tokens: new Array(",","\n"), fullSearch: true, partialSearch: true });

</script>







</body> </html> 

 </source>


Non-incremental Ajax autocompleter.

   <source lang="html4strict">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <title>script.aculo.us Autocompleter functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
 <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
 <style type="text/css" media="screen">
   .selected { background-color: #888; }
 </style>

</head> <body>

script.aculo.us Autocompleter functional test file

This is an incremental Ajax autocompleter. Type something, then type a comma, than type more. This autocompleter features an indicator.

Autocompleter ac1: <input type="text" id="ac1" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac1","ac1update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html", { 
   tokens: ",", indicator: "ac1_indicator"
 } );

</script>

Non-incremental Ajax autocompleter.
Autocompleter ac2: <input id="ac2" type="text" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac2","ac2update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html");

</script>

Non-incremental Ajax autocompleter.
Autocompleter ac3: <input id="ac3" type="text" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Ajax.Autocompleter("ac3","ac3update","scriptaculous-js-1.8.2/test/functional/_autocomplete_result.html");

</script>

Local incremental array autocompleter ac4
with full-search. Type "Jac", hit enter a few
times, type "gne".
<textarea rows=5 cols=40 id="ac4" autocomplete="off"></textarea>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Autocompleter.Local("ac4","ac4update",
 new Array("John Jackson", "", "Jack Johnson", "", "Jane Agnews"), { tokens: new Array(",","\n"), fullSearch: true, partialSearch: true });

</script>

Local incremental array autocompleter ac5
with fixed height and scrollbar. Type "Jac", hit enter a few
times, type "gne".
<input id="ac5" type="text" autocomplete="off"/>

<script type="text/javascript" language="javascript" charset="utf-8"> 

 new Autocompleter.Local("ac5","ac5update",
 new Array("John Jackson", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews"), { tokens: new Array(",","\n"), fullSearch: true, partialSearch: true });

</script>







</body> </html> 

 </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Scriptaculous/autocompleter&oldid=3651»