Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] połaczenie text z select
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
wermon
30.03.2004, 19:16:41
Witam,

Czy da sie napisac skrypt ktory sprawialby ze

fraza "nas" wpisana w pole "input type=text"
powodowalaby wyswietlenie sie w polu select

opcji zaczynajacych sie na ta fraze czyli "nas"

czyli np. nastepny , nastukany , nasypany
Wankster
30.03.2004, 19:39:26
Ja mam to zrobione tak, że jest sobie:

SELECT INPUT
IFRAME (display: none;)

Na początku lista SELECT jest pusta, ale jak wpiszesz coś do pierwszego INPUT to co literkę (onkeyup) wysyłane jest zapytanie do bazy, a ta zwraca wyniki, a na stronie wynikowej (ta niewidoczna - otwiera się w IFRAME) jest skrypt, który dodaje wszystkie elementy (w JS) z wygenerowanej przez php tablicy do listy SELECT winksmiley.jpg
wermon
31.03.2004, 00:03:12
...no nigdzie nie moge znalezc, a przyznam sie ze w js jestem tak cienki jak kursy ktore znalazlem :/ wiec jak ktos wie chociaz za pomoca jakiej funkji rozwinac select i przejsc do konkretnet opcji to bylbym very dzwieczny

(jakby ktos nie do konca zrozumial o co mi chodzi dodam ze chodzi mi o taki efekt jak w zakladce index plikow pomocy)
kszychu
31.03.2004, 09:49:12
Pokombinuj z <select ... multiple size=wielkosc_selecta>, a do zaznaczania odpowiednich pól użyj document.nazwa_formularza.nazwa_selecta[nr_pola].selected = true;
Wankster
31.03.2004, 19:46:26
Jeśli to ma działać na takiej zasadzie...
[XML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2" ?>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5.       
  6. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  7.  
  8. <head>
  9.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  10.       
  11.       <title>php.pl</title>
  12.       
  13.       <script type="text/javascript">
  14.       <!--
  15.       
  16.             var optionsList  = null;
  17.             var lastSelected = null;
  18.             
  19.             function start()
  20.             {
  21.                   document.getElementById( 'phrase' ).focus();
  22.                   
  23.                   optionsList = document.getElementById( 'options' );
  24.             }
  25.             
  26.             function search4option( phrase )
  27.             {
  28.                   if ( ( optionsList.options[ lastSelected ] != null ) && ( optionsList.options[ lastSelected ] != 'undefined' ) )
  29.                   {
  30.                         optionsList.options[ lastSelected ].selected = false;
  31.                   }
  32.                   
  33.                   for ( var i = 0; i < optionsList.options.length; i++ )
  34.                   {
  35.                         regEx   = new RegExp( "^" + phrase + ".*$", 'i' );
  36.                         results = optionsList.options[ i ].value.match( regEx );
  37.                         
  38.                         if ( results !== null )
  39.                         {
  40.                               optionsList.options[ i ].selected = true;
  41.                               
  42.                               lastSelected = i;
  43.                               
  44.                               break;
  45.                         }
  46.                   }
  47.             }
  48.             
  49.             function selectOption( value )
  50.             {
  51.                   for ( var i = 0; i < optionsList.options; i++ )
  52.                   {
  53.                         if ( optionsList.options[ i ].value == value )
  54.                         {
  55.                               lastSelected = i;
  56.                         }
  57.                   }
  58.             }
  59.             
  60.             window.onload = start;
  61.       
  62.       //-->
  63.       </script>
  64.       <style type="text/css">
  65.       <!--
  66.       
  67.             input,
  68.             select
  69.             {
  70.                   width: 200px;
  71.             }
  72.       
  73.       //-->
  74.       </style>
  75. </head>
  76.  
  77. <body xml:lang="pl">
  78.       <input type="text" id="phrase" onkeyup="search4option( this.value );" />
  79.       <br />
  80.       <select id="options" name="options" size="10" onchange="selectOption( this.value );">
  81.             <option value="_mmcache_loader_file">_mmcache_loader_file</option>
  82.             <option value="_mmcache_loader_line">_mmcache_loader_line</option>
  83.             <option value="_mmcache_output_handler">_mmcache_output_handler</option>
  84.             <option value="abs">abs</option>
  85.             <option value="acos">acos</option>
  86.             <option value="addcslashes">addcslashes</option>
  87.             <option value="addslashes">addslashes</option>
  88.             <option value="aggregate">aggregate</option>
  89.             <option value="aggregate_methods">aggregate_methods</option>
  90.             <option value="aggregate_methods_by_list">aggregate_methods_by_list</option>
  91.             <option value="aggregate_methods_by_regexp">aggregate_methods_by_regexp</option>
  92.             <option value="aggregate_properties">aggregate_properties</option>
  93.             <option value="aggregate_properties_by_list">aggregate_properties_by_list</option>
  94.             <option value="aggregate_properties_by_regexp">aggregate_properties_by_regexp</option>
  95.             <option value="aggregation_info">aggregation_info</option>
  96.             <option value="apache_get_modules">apache_get_modules</option>
  97.             <option value="apache_get_version">apache_get_version</option>
  98.             <option value="apache_getenv">apache_getenv</option>
  99.             <option value="apache_lookup_uri">apache_lookup_uri</option>
  100.             <option value="apache_note">apache_note</option>
  101.             <option value="apache_request_headers">apache_request_headers</option>
  102.             <option value="apache_response_headers">apache_response_headers</option>
  103.             <option value="apache_setenv">apache_setenv</option>
  104.             <option value="array_change_key_case">array_change_key_case</option>
  105.             <option value="array_chunk">array_chunk</option>
  106.             <option value="array_count_values">array_count_values</option>
  107.             <option value="array_diff">array_diff</option>
  108.             <option value="array_diff_assoc">array_diff_assoc</option>
  109.             <option value="array_fill">array_fill</option>
  110.             <option value="array_filter">array_filter</option>
  111.             <option value="array_flip">array_flip</option>
  112.             <option value="array_intersect">array_intersect</option>
  113.             <option value="array_intersect_assoc">array_intersect_assoc</option>
  114.             <option value="array_key_exists">array_key_exists</option>
  115.             <option value="array_keys">array_keys</option>
  116.             <option value="array_map">array_map</option>
  117.             <option value="array_merge">array_merge</option>
  118.             <option value="array_merge_recursive">array_merge_recursive</option>
  119.             <option value="array_multisort">array_multisort</option>
  120.             <option value="array_pad">array_pad</option>
  121.             <option value="array_pop">array_pop</option>
  122.             <option value="array_push">array_push</option>
  123.       </select>
  124. </body>
  125.  
  126. </html>
[XML] pobierz, plaintext
wermon
1.04.2004, 01:06:02
staaaary jestes WIELKI :!: :!: :!: - dokladnie o to mi chodzilo, wielkie dzieki zaraz bede patrzyl jak Ty to zrobiles..., jeszcze raz dziekuje za pomoc
wermon
1.04.2004, 01:23:43
8O ...a ja sie ludzilem ze moze uda mi sie samemu napisac rolleyes.gif
kicaj
1.04.2004, 11:56:36
hehe genialny ten skrypcik..., a daloby sie jeszcze zrobic ze po kliknieciu na selecta, wartosc wstawia sie do inputa?
wermon
1.04.2004, 17:14:24
wedlug mojej raczej skromnej js-wiedzy byloby to tak:

onChange="document.input_id.value = document.select_id.value ;"

onChange oczywiscie wstawiasz w selekcie
Wankster
1.04.2004, 20:54:23
nie document.nazwapola.value tylko document.forms.nazwaformularza.nazwapola.value winksmiley.jpg
kicaj
1.04.2004, 21:03:43
no jakos mi nie wychodzi...
Wankster
2.04.2004, 13:02:35
To tylko powiedz mi w jakim INPUT ma się to wyświetlać winksmiley.jpg
kicaj
2.04.2004, 13:06:16
w tym w ktorym mozemy pisac...
Wankster
2.04.2004, 18:34:45
Podmień kod funkcji selectOption() na ten:
Kod
  function selectOption( value )

  {

     for ( var i = 0; i < optionsList.options.length; i++ )

     {

    if ( optionsList.options[ i ].value == value )

    {

        lastSelected = i;

       

        document.getElementById( 'phrase' ).value = value;

       

        break;

    }

     }

  }
kicaj
2.04.2004, 20:17:37
dzieki wielkie smile.gif
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.