Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]Autocomplete - lista po kliknięciu
Forum PHP.pl > Forum > Przedszkole
roghatt
8.08.2012, 09:22:01
Witam
W jaki sposób zrobić aby po kliknięciu w pole INPUT
[HTML] pobierz, plaintext 
  1. <input id="example" NAME="obszar" size="35" />
[HTML] pobierz, plaintext

wyświetliła się lista podpowiedzi? (obecnie lista podpowiedzi pojawia się dopiero po wpisaniu pierwszej literki)

Kod
<script>
$(document).ready(function(){
   var data ="<? echo $tablica2;?>".split(",");
$("#example").autocomplete(data);
});
</script>

$tablica2 to słowa do podpowiedzi wypisane jedno za drugim po przecinku (pobrane wcześniej z bazy)

Co tutaj mogę jeszcze podać aby było pomocne? Całe pliki js chyba nie wkleję bo to ogólnodostępny skrypt
autocomplete.css
jqueryautocomplete.js
jquery-latest.js

Czy w ogóle jest możliwe aby po kliknięciu w pole INPUT pojawiły się już podpowiedzi?
djgarsi
8.08.2012, 09:24:24
Możesz wyświetlać np ostatnio szukane, lub najczęściej szukane. Bo jeśli nic nie wpiszesz to niestety autocomplete nie ma żadnego punktu zaczepienia.
roghatt
8.08.2012, 09:28:10
czyli można zrobić, że po kliknięciu w pole wyświetli się lista np. z ostatnio szukanymi? Czy w jaki sposób ma to wyświetlić jak autocomplete potrzebuje jakąś akcję czyli wpisanie znaku?
djgarsi
8.08.2012, 09:44:41
Hm. Może focus załatwi sprawę?
roghatt
8.08.2012, 10:04:47
znalazłem inny przykład:
http://jsfiddle.net/HXrLL/

Ale mimo że to umieściłem u siebie to nie działa:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <TITLE>test</TITLE>
  6.  
  7.  <script type="text/javascript">
  8. <!--
  9. YUI({
  10.     'yui2': '2.9.0',
  11.     '2in3': '4',
  12. }).use('yui2-datasource', 'yui2-autocomplete', function(Y) {
  13.     var timeDS = [
  14.         "2:00 AM",
  15.         "2:15 AM",
  16.         "2:30 AM",
  17.         "2:45 AM",
  18.         "2:00 PM",
  19.         "2:15 PM",
  20.         "2:30 PM",
  21.         "2:45 PM"
  22.         ],
  23.         oDS, oAC;
  24.  
  25.     YAHOO = Y.YUI2;
  26.  
  27.     oDS = new YAHOO.util.LocalDataSource(timeDS);
  28.     oDS.responseSchema = {
  29.         fields: ["time"]
  30.     };
  31.  
  32.     oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
  33.     oAC.prehighlightClassName = "yui-ac-prehighlight";
  34.     oAC.useShadow = true;
  35.     oAC.minQueryLength = 0;
  36.  
  37.     oAC.itemSelectEvent.subscribe(function(sType, aArgs) {
  38.         var oData = aArgs[2];
  39.         //alert(oData[1].time);
  40.     });
  41.  
  42.     document.getElementById("myInput").onfocus = function() {
  43.         oAC.sendQuery("");
  44.     }
  45.  
  46. });
  47. //-->
  48. </script>
  49.  </head>
  50. <body>
  51. <label for="myInput">Enter a time:</label>
  52. <div id="myAutoComplete" class="yui-skin-sam">
  53.     <input id="myInput" type="text">
  54.     <div id="myContainer"></div>
  55. </div>
  56.  
  57. <div id="myTime"></div>
  58. </body>
  59.  
  60.  
  61. </html>
[HTML] pobierz, plaintext


Czego może tutaj brakować?
erix
8.08.2012, 10:07:00
Dołączanych bibliotek.
roghatt
8.08.2012, 11:11:46
Jeszcze raz:
Kod
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <TITLE>test</TITLE>
  6. <script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
  7.  
  8.  <script type="text/javascript">
  9. <!--
  10. YUI({
  11.     'yui2': '2.9.0',
  12.     '2in3': '4',
  13. }).use('yui2-datasource', 'yui2-autocomplete', function (Y) {
  14.     var timeDS = [
  15.  
  16.         "2:00 AM",
  17.         "2:15 AM",
  18.         "2:30 AM",
  19.         "2:45 AM",
  20.         "2:00 PM",
  21.         "2:15 PM",
  22.         "2:30 PM",
  23.         "2:45 PM",
  24.     ],
  25.     oDS,
  26.     oAC;
  27.  
  28.     YAHOO = Y.YUI2;
  29.  
  30.     oDS = new YAHOO.util.LocalDataSource(timeDS);
  31.     oDS.responseSchema = {
  32.         fields: ["time"]
  33.     };
  34.  
  35.     oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
  36.     oAC.minQueryLength = 0;
  37.     oAC.forceSelection = true;
  38.  
  39.     oAC.itemSelectEvent.subscribe(function (sType, aArgs) {   
  40.         var oData = aArgs[2];
  41.         console.log(oData[1].time);
  42.     });
  43.  
  44.     YAHOO.util.Event.addListener("myInput", "click", function (e) {
  45.         YAHOO.util.Dom.get("myInput").value = "";
  46.         oAC.sendQuery("");        
  47.     });
  48. });
  49.  
  50. //-->
  51. </script>
  52.  </head>
  53. <body>
  54. <label for="myInput">Enter a time:</label>
  55. <div id="myAutoComplete" class="yui-skin-sam">
  56.     <input id="myInput" type="text">
  57.     <div id="myContainer"></div>
  58. </div>
  59. </body>
  60.  
  61.  
  62. </html>
[HTML] pobierz, plaintext


Mój kod nie działa pod IE, tylko pod FF
A ten przykład podawany wcześniej
http://jsfiddle.net/HXrLL/
działa pod IE. Czegoś dalej u mnie brakuje?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.