부트스트랩 플러그인_javascript 기술을 기반으로 양식을 자동으로 완성하는 자동 완성 구현

부트스트랩 플러그인을 기반으로 자동 완성 기능을 제공하여 스크립트 코드, 사용 사례 및 백엔드 서버(php)를 제공합니다. 원문에서 명확하지 않은 내용이 모두에게 도움이 되기를 바랍니다. .

먼저 bootstrap&jquery를 로드해야 합니다. 추가 설명이 필요한 것은 백엔드에서 반환된 2차원 배열이 formatItem 메서드 아래 호출과 일치해야 한다는 것입니다.
또한 반환된 데이터는 먼저 ParseJSON이어야 합니다!

관련 매개변수 설명:

소스: 함수(쿼리,프로세스){}. 쿼리는 현재 텍스트 입력 상자에 있는 문자열을 나타냅니다. 이 방법에서는 ajax를 통해 백그라운드에서 데이터(배열 형식의 json 개체)를 요청한 다음 반환된 개체를 프로세스의 매개 변수로 사용할 수 있습니다. >
formatItem: 함수(항목){}. 반환된 데이터의 특정 json 객체를 문자열 형식으로 변환하여 프롬프트 목록에 표시합니다.
setValue: 함수(항목){}. 프롬프트 목록의 항목을 선택했을 때 텍스트 입력 상자에 표시되는 값과 실제로 얻어지는 값을 설정합니다. 반환 값 형식: {'data-value':item["입력 상자에 표시된 값의 항목 속성"],'real-value':item["얻어야 하는 실제 값의 항목 속성" ]}, 나중에 텍스트 입력 상자를 통해 사용할 수 있습니다. 실제 값 속성은 값을 가져옵니다.
항목: 자동 완성 프롬프트의 최대 결과 세트 수, 기본값: 8
minLength: 일치는 현재 텍스트 입력 상자의 문자열이 이 속성 값에 도달할 때만 수행됩니다.
지연: 너무 빠른 입력으로 인해 백그라운드에 자주 요청하는 것을 방지하기 위해 백그라운드에서 실제로 데이터를 요청하기 전의 시간(밀리초)을 지정합니다. 기본값: 500

부트스트랩 플러그인을 기반으로 양식을 자동으로 완성하는 자동완성을 구현하며, 코드는 다음과 같습니다

1. 코드

<script>
$('#sim_iccid').autocomplete({
 source:function(query,process){
  var matchCount = this.options.items;//允许返回结果集最大数量
  $.get("http://www.soyiyuan.com/update/",{"iccid":query,"matchCount":matchCount},function(respData){
   respData = $.parseJSON(respData);//解析返回的数据
   return process(respData);
  });
 },
 formatItem:function(item){
  return item["iccid"]+"("+item["mobile"]+")";
 },
 setValue:function(item){
  return {'data-value':item["iccid"],'real-value':item["mobile"]};
 }
});
</script>

2. $data는 2차원 배열입니다

에코 json_encode( $data )
3. 반환해야 하는 표준 json 형식

[코드][{"iccid":"12345678901234567890","mobile":"1850000"},{"iccid":"12345785","mobile":"1850001"}][코드]

Bootstrap 자동 완성 제어 Autocomplete는 bootstrap 자체의 자동 완성 제어를 기반으로 합니다. 왜냐하면 자동 완성은 복잡한 객체를 지원하지 않기 때문입니다.

//示例代码如下：
 
$('#autocompleteInput').autocomplete({
  source:function(query,process){
   var matchCount = this.options.items;//返回结果集最大数量
   $.post("/bootstrap/region",{"matchInfo":query,"matchCount":matchCount},function(respData){
    return process(respData);
   });
  },
  formatItem:function(item){
   return item["regionName"]+"("+item["regionNameEn"]+"，"+item["regionShortnameEn"]+") - "+item["regionCode"];
  },
  setValue:function(item){
   return {'data-value':item["regionName"],'real-value':item["regionCode"]};
  }
 });
 
$("#goBtn").click(function(){ //获取文本框的实际值
  var regionCode = $("#autocompleteInput").attr("real-value") || "";
  alert(regionCode);
 });

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.