HTML과 부트스트랩을 사용하여 검색 가능한 선택 상자를 만드는 방법은 무엇입니까?

검색 기능을 갖춘 고급 선택 상자 만들기

기존 선택 상자에 검색 기능을 추가하면 사용자 경험과 데이터 입력 효율성을 크게 향상시킬 수 있습니다. . 이를 달성하기 위해 HTML과 부트스트랩을 사용하는 솔루션이 있습니다.

구현:

구현에는 다음과 같이 텍스트 필드와 선택 상자가 있는 양식을 만드는 작업이 포함됩니다.

<code class="html"><form>
  <input type="text" list="brow" placeholder="Search...">
  <datalist id="brow">
    <option value="Internet Explorer"></option>
    <option value="Firefox"></option>
    <option value="Chrome"></option>
  </datalist>

  <select>
    <option value="ie">Internet Explorer</option>
    <option value="ff">Firefox</option>
    <option value="cr">Chrome</option>
  </select>
</form></code>

• 텍스트 필드: 목록 속성이 있는 텍스트 필드를 사용하면 사용자가 입력 내용을 입력하고 데이터 목록에서 일치하는 옵션을 표시할 수 있습니다.
• 데이터 목록: 데이터 목록은 검색 필드에 대해 사전 정의된 옵션 목록을 정의합니다.
• 선택 상자: 선택 상자는 전통적인 옵션 선택을 제공하며, 이는 다음을 기반으로 업데이트될 수도 있습니다. 검색 입력.

사용자 정의:

Bootstrap은 입력 그룹 추가와 같이 텍스트 필드 및 선택 상자의 모양을 사용자 정의할 수 있는 다양한 클래스를 제공합니다. 또는 다양한 구성 요소에 대한 스타일링. 예를 들어 다음 CSS는 텍스트 필드에 검색 아이콘을 추가합니다.

<code class="css">input[list] {
  padding-right: 30px;
}

input[list]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background: url(search.png) no-repeat;
  background-size: contain;
}</code>

결론:

HTML, Bootstrap 및 간단한 코드 조각을 결합하여, 검색 기능을 갖춘 매우 기능적인 선택 상자를 만들 수 있습니다. 이 솔루션은 데이터 입력을 위한 보다 편리하고 사용자 친화적인 방법을 제공하므로 길거나 복잡한 목록에 특히 유용합니다.

위 내용은 HTML과 부트스트랩을 사용하여 검색 가능한 선택 상자를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!