Come impostare l'elenco a discesa di completamento automatico

Sto cercando una soluzione HTML/CSS pura. Tutto quello che ho trovato finora riguarda i plugin (di solito jquery).Come impostare l'elenco a discesa di completamento automatico

Desidero essere in grado di applicare lo stile alla casella di riepilogo dei suggerimenti di autocompletamento (non so come si chiama realmente, quindi ho cercato di descriverlo).

Per esempio io ho

CSS

input[type=search] { 
     background: none; 
     font-weight: bold; 
     border-color: #2e2e2e; 
     border-style: solid; 
     border-width: 2px 2px 2px 2px; 
     outline: none; 
     padding:10px 20px 10px 20px; 
     width: 250px; 
}

La "casella a discesa completamento automatico" è la semplice scatola bianca tradizionale con il proprio carattere predefinito. Non so cosa scegliere come target nel mio CSS per aggiornarlo.

HTML

<div id="search"> 
     <form method="GET" action="events"> 
       <div id="search_field_container"> 
         <input name="city" id="search_input" type="search" placeholder="City, ST"> 
       </div> 
       <input type="submit" value="Find"> 
     </form> 
</div>

fonte

2015-02-03 drewsmug

se possibile, fornire il Marchio HTML up del vostro autocompleteDropdownbox. – Jatin

Grazie. Ho aggiunto l'HTML ridotto. Mentre inserisco le città (ad esempio Sacramento, San Diego, Salem) Il mio box a discesa cresce ma non so come farlo. – drewsmug

Penso di capire la confusione della gente più ora. Non ho alcun codice che crea il autocompleteDropdownbox. Penso che sia una cosa del browser predefinito. Ad esempio, se crei un semplice modulo html per l'accesso (solo un campo nome utente e password) e inizi ad accedere con account casuali, il tuo browser inizierà a suggerirti di accedere con quei nomi di account casuali. Quella casella a cascata che suggerisce quei precedenti nomi di login non è qualcosa che ho codificato. – drewsmug

A quanto pare la casella di completamento automatico discesa non possono essere modificati con i CSS e non fa parte del DOM. Ho trovato queste informazioni dalle seguenti domande (duplicate).

How to style the browser's autocomplete dropdown box?

Styling autocomplete dropdowns in browsers

fonte

2015-02-03 22:54:51 drewsmug

problema qui sono i browser, perché si applicano i propri stili. Per aggirare questa restrizione devi sovrascrivere/disabilitare gli stili del motore del browser.

Per webkit (testato in Safari) utilizzare:

-webkit-appearance:none;

per vedere l'effetto, aperto jsfiddle example con WebKit browser basato, e. g. Safari.

Maggiori informazioni sulle restrizioni da parte di WebKit Ricerca Ingressi styling: LINK

Edit: ho frainteso la questione, perché il codice CSS si indirizzava casella di input di ricerca. Basato sul nuovo codice HTML, dovresti probabilmente scegliere come target lo stile di div con ID city_search_matches. Come i risultati popolano quel div è sconosciuto, quindi non posso aiutarti con qualche esempio di codice.

fonte

2015-02-03 21:19:14 atastrumf

Grazie per aver guardato la mia domanda. Ho aggiunto input [type = search] {- webkit-appearance: none;} e questo non sembrava influenzare il mio problema in alcun modo. C'è ancora un dropbox che appare e non ho ancora idea di come farlo. – drewsmug

@drewsmug Sicuro che non ha aiutato, ho perso la parte che stai cercando di definire il menu a discesa non la casella di input .. Ho modificato la mia risposta, ma con informazioni attualmente limitate, questo è tutto ciò che posso darti. – atastrumf

Tuttavia non sono sicuro quale controllo di completamento automatico si sta utilizzando.

Sample Working Demo

Se si sta utilizzando jQuery completamento automatico allora si può indirizzare utilizzando il seguito css

/*Css to target the dropdownbox*/ 
    ul.ui-autocomplete { 
     color: red !important; 
     -moz-border-radius: 15px; 
     border-radius: 15px; 
    }

Sopra css cambierà il colore del carattere a Red e poi fare l'angolo da arrotondare per dropdownoptions.

codice completo:

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head runat="server"> 
 
    <style> 
 
     input[type=search] { 
 
      background: none; 
 
      font-weight: bold; 
 
      border-color: #2e2e2e; 
 
      border-style: solid; 
 
      border-width: 2px 2px 2px 2px; 
 
      outline: none; 
 
      padding: 10px 20px 10px 20px; 
 
      width: 250px; 
 
     } 
 
     /*Css to target the dropdownbox*/ 
 
     ul.ui-autocomplete { 
 
      color: red !important; 
 
      -moz-border-radius: 15px; 
 
      border-radius: 15px; 
 
     } 
 
    </style> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script> 
 
     $(function() { 
 
      var availableTags = [ 
 
       "ActionScript", 
 
       "AppleScript", 
 
       "Asp", 
 
       "BASIC", 
 
       "C", 
 
       "C++", 
 
       "Clojure", 
 
       "COBOL", 
 
       "ColdFusion", 
 
       "Erlang", 
 
       "Fortran", 
 
       "Groovy", 
 
       "Haskell", 
 
       "Java", 
 
       "JavaScript", 
 
       "Lisp", 
 
       "Perl", 
 
       "PHP", 
 
       "Python", 
 
       "Ruby", 
 
       "Scala", 
 
       "Scheme" 
 
      ]; 
 
      $("#search_input").autocomplete({ 
 
       source: availableTags 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 
<body> 
 
    <form id="form1" runat="server"> 
 
     <div class="ui-widget"> 
 
      <input name="city" id="search_input" type="search" placeholder="City, ST"> 
 
     </div> 
 
    </form> 
 
</body> 
 
</html>

fonte

2015-02-03 22:24:52 Jatin

Non capisco l'asp: roba di TextBox. Sembra che sia il codice ASP. Sono ancora confuso su come sceglierei come target il dropbox per utilizzare lo stile di classe .autocomplete che ho specificato. Non è un elemento che ho scritto quindi non posso aggiungere "class =" autocomplete "" ad esso. – drewsmug

.ui-widget-content .ui-state-focus 
{ 
    background: blue; 
    border: 1px solid red; 
}

Assicurarsi di aver scaricato il pacchetto jQuery-ui e ha fornito i link per i CSS e JS nel tuo html.http://jqueryui.com/download/

il file CSS che stai sovrascrivendo è jquery-ui.css

fonte

2015-08-10 07:17:45

Come impostare l'elenco a discesa di completamento automatico

risposta

Problemi correlati