jquery는 자동 프롬프트 기능을 구현합니다.

최신 웹 애플리케이션에서 자동 프롬프트 기능은 매우 기본적인 기능 중 하나입니다. 자동 프롬프트를 사용하면 사용자가 입력 상자에 내용을 입력할 때 편리하게 스마트 프롬프트를 받을 수 있고, 입력 속도가 빨라져 결과 로딩을 기다리는 시간이 크게 단축될 수 있습니다.

그렇다면 jQuery를 사용하여 자동 프롬프트 기능을 구현하는 방법은 무엇입니까? 구체적인 구현 과정은 아래와 같습니다.

1. 준비
구현을 시작하기 전에 먼저 jQuery 라이브러리 및 관련 CSS 파일을 준비해야 합니다. 공식 웹사이트에서 라이브러리 파일을 다운로드하여 HTML 파일에 삽입하도록 선택하거나 CDN을 사용하여 라이브러리 파일의 로딩 속도를 가속화할 수 있습니다.

CSS 파일의 경우 Bootstrap에서 제공하는 스타일을 사용하여 프롬프트 상자의 모양을 아름답게 만들 수 있습니다. 그러나 이 단계는 필수 단계가 아닙니다. 스타일을 아름답게 꾸밀 필요가 없다면 스타일 파일을 가져올 필요가 없습니다.

2. 데이터 얻기
자동 프롬프트는 데이터 소스를 제공해야 합니다. 즉, 사용자가 콘텐츠를 입력하면 입력된 콘텐츠와 관련된 프롬프트 정보를 데이터 소스에서 가져와 사용자 앞에 표시합니다. 이 데이터 소스는 JSON 파일, 데이터베이스 테이블 또는 API 인터페이스일 수 있습니다.

이 예에서는 간단한 JSON 파일을 데이터 소스로 사용합니다. 이 파일에는 사용자가 입력할 때 스마트 힌트를 제공할 일부 도시의 이름이 포함되어 있습니다.

파일 소개 측면에서 AJAX 방식을 사용하여 서버에서 JSON 데이터를 얻을 수 있습니다. 편의상 여기서는 HTML 파일로 직접 소개하겠습니다.

3. 코드 작성
다음으로 코드 작성을 시작해 보겠습니다.

1. HTML 구조

HTML 구조에는 스마트 프롬프트 콘텐츠를 표시하기 위한 입력 상자와 프롬프트 상자가 필요합니다. 구체적인 구조는 다음과 같습니다:

<input id="search-box" type="text" placeholder="输入城市名" />
<div id="suggestion-box"></div>

2. jQuery code

먼저 문서가 로드된 후 텍스트 상자와 프롬프트 상자 요소를 가져와서 키업 이벤트를 텍스트 상자에 바인딩해야 합니다. 사용자 입력.

다음으로, 각 입력에 대해 데이터 소스에서 입력 콘텐츠와 관련된 프롬프트 정보를 가져와서 프롬프트 상자에 표시해야 합니다.

구체적인 코드는 다음과 같습니다.

$(document).ready(function() {
  // 获取输入框和提示框元素
  var searchBox = $('#search-box');
  var suggestionBox = $('#suggestion-box');

  // 绑定 keyup 事件
  searchBox.keyup(function() {
    // 获取输入框的值
    var currentText = searchBox.val();

    // 根据输入框的值从数据源中获取匹配的提示信息
    var filteredData = data.filter(function(item) {
        return item.toLowerCase().indexOf(currentText.toLowerCase()) > -1;
    });

    // 根据获取到的提示信息生成提示框的内容
    var html = '';
    for (var i = 0; i < filteredData.length; i++) {
        html += '<div class="item">' + filteredData[i] + '</div>';
    }

    // 将生成的内容填充到提示框中
    suggestionBox.html(html);
  });
});

이 중 data는 데이터 소스에서 얻은 정보를 저장하는 데 사용되는 전역 변수를 나타냅니다. 여기서는 간단히 도시 이름이 포함된 배열로 정의하며 구체적인 내용은 다음과 같습니다.

var data = ['北京', '上海', '广州', '深圳', '杭州', '南京', '武汉', '成都'];

4. CSS 스타일

프롬프트 상자를 아름답게 하려면 JavaScript 코드 외에도 일부 CSS 스타일도 필요합니다. 여기서는 Bootstrap에서 제공하는 스타일을 사용했으며, 코드는 다음과 같습니다:

#suggestion-box {
  position: relative;
  z-index: 999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
}

#suggestion-box .item {
  padding: 5px 10px;
  font-size: 14px;
}

#suggestion-box .item:hover {
  background: #f5f5f5;
}

IV.Summary

위 코드를 통해 사용자에게 지능적인 프롬프트를 제공하고 입력 속도를 높일 수 있는 간단한 자동 프롬프트 기능을 구현했습니다. . 물론 실제 애플리케이션에서는 캐싱을 사용하여 데이터 소스에 대한 액세스 속도를 높이고 비동기 로딩을 사용하여 페이지 차단을 방지하는 등 더 많은 최적화 작업을 수행할 수 있습니다.

위 내용은 jquery는 자동 프롬프트 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!