Łączenie wprowadzania i wybierania w jedno widoczne pole wejściowe

Jestem nowy w stylizacji elementów html (np. Wybierz & select w tym przypadku) i szukam implementacji wizualnie połączonego elementu input/select. Zasadniczo dane wejściowe i selekcje będą nadal całkowicie oddzielne jako elementy formularza, ale w oparciu o klasę i css, chciałbym wstawić zawartość menu wyboru po prawej stronie pola wejściowego. Niestety nie jestem photoshoper, więc tutaj jest przedstawienie co to może wyglądać następująco:Łączenie wprowadzania i wybierania w jedno widoczne pole wejściowe

------------------------------------------------ 
|        Select text [v] | 
------------------------------------------------

Jak widać lewa część dłoni na wejściu jest gdzie należy wpisać ciąg do elementu wejściowego, a wybierz rozwijane jest wstawione w ramkę elementu wejściowego ([v] ma być strzałką w dół, aby upuścić listę). Wszelkie linki do tego, jak uzyskać stylizację w stylu podobnym do tego lub sugestie, są mile widziane.

Źródło

2011-11-28 somecallmemike

Więc w zasadzie pole tekstowe można wpisać w, a otrzymasz listę pasujących możliwości z listy rozwijanej? –

jeśli to, co opisujesz, możesz użyć po prostu datalisty – albert

@Marc, niezupełnie. Chcę mieć dane wejściowe i rozwijane. W menu rozwijanym znajdują się wyszukiwane hasła, takie jak "klienci, kontakty, numery telefonów", a tekst wejściowy będzie odnosił się do dowolnego wyszukiwanego hasła. Mógłbym po prostu wstawić dane na ekranie, a następnie upuścić obok i wykonać to samo, ale chcę wstawić wybrane menu do wybranej granicy, ponieważ myślę, że wyglądałoby naprawdę zgrabnie. – somecallmemike

co z tego?

http://jqueryui.com/demos/autocomplete/#combobox

Źródło

2011-11-28 21:42:30 mccow002

Coś jak to powinno osiągnąć to, co chcesz.

http://jsfiddle.net/rhoenig/xFQMf/

Źródło

2011-11-28 21:44:36 Robert

To nie działa w moim firefoxie. – Qqwy

@Qqwy, jeśli klikniesz na link, zobaczysz sekcję wyników z tekstem/ramką przesuniętą w prawo? Jeśli tak, możesz edytować pytanie, aby pokazać, jak wygląda twój plik. – Robert

Nie widzę w ogóle zaznaczenia. Widzę etykietę zakresu i pole wprowadzania. Nie ma wyboru. – Qqwy

Poniższy przykład jest bardzo prosty. Pokazuje najważniejszą rzecz, jaką chciałbyś zrobić: Ponieważ elementy formularzy mogą być stylizowane za pomocą CSS, tak jak wszystko inne, jest to całkiem proste. Ten przykład nadal ma pewne problemy z stylizacją w przeglądarkach innych niż firefox, trochę go poprawię.

<html> 
<head> 
    <style> 
     select#selectoption { 
      border-left:none; 
      padding:none; 
     } 

     input#datahere { 
      position:relative; 
      border-right:none; 
      padding:none; 
     } 
     </style> 
    </head> 
<body> 
    The form below is a simple example. 
<form name ="explanation"action="test" method="post"> 
<input type="text" id="datahere" /> 
<select id="selectoption" /><option>test</option><option>test2</option></select> 

</form> 


</body> 
</html>

EDIT: Przykład online co chcesz można zobaczyć tutaj: http://jsfiddle.net/xFQMf/3/

Źródło

2011-11-28 21:53:28 Qqwy

Jest biblioteką można spróbować: https://github.com/eredacokmerke/dm-i

Źródło

2014-12-11 12:53:24 user4757345