Bootstrap 플러그인을 기반으로 AutoComplete는 양식을 자동으로 완성하고 스크립트 코드, 사용 사례 및 배경 서버 (PHP)를 제공합니다. 원본 텍스트에는 명확하게 설명되지 않은 것들이 있으며, 그것이 모든 사람을 도울 수 있기를 바랍니다.
우선, 나는 부트 스트랩 및 jQuery를로드해야합니다. 백엔드에 의해 반환 된 2 차원 배열은 FormateM 메소드 아래의 호출과 일치한다는 점에 유의해야합니다.
또한 반환 된 데이터는 먼저 파 세인이어야합니다! 기억하다.
관련 매개 변수 설명 :
출처 : 함수 (쿼리, 프로세스) {}. 쿼리는 현재 텍스트 입력 상자의 문자열을 나타냅니다. 이 방법에서는 Ajax를 통해 배경 (배열 형태의 JSON 객체)에서 데이터를 요청할 수 있으며, 반환 된 객체는 프로세스의 매개 변수로 사용됩니다.
formatitem : function (item) {}. 데이터를 반환하는 특정 JSON 객체는 문자열 형식으로 변환되며, 이는 프롬프트 목록에 표시하는 데 사용되며 리턴 값은 다음과 같습니다.
setValue : function (item) {}. 프롬프트 목록의 항목을 선택하면 텍스트 입력 상자에 표시된 값과 실제로 얻어야하는 값을 설정하십시오. 반환 값 형식 : { 'data-value': 항목 [ "입력 상자에 표시된 값의 항목 속성"], '실제 값': 항목 [ "획득 해야하는 실제 값의 항목 속성"}}이 값은 텍스트 입력 상자의 실제 값 속성을 통해 얻을 수 있습니다.
항목 : 자동 완료 프롬프트를위한 최대 결과 세트 수, 기본값 : 8;
Minlength : 일치 프로세스는 현재 텍스트 입력 상자의 문자열이 속성 값에 도달 할 때만 수행됩니다. 기본값 : 1;
지연 : 밀리 초 지연 수를 지정한 후 배경에서 데이터를 요청하여 배경의 빈번한 요청이 빠른 입력으로 인해 자주 발생하는 것을 방지합니다. 기본값 : 500
부트 스트랩 플러그인을 기반으로 자동 완성 된 양식을 자동으로 완료하면 코드는 다음과 같습니다.
1. 코드
<cript> $ ( '##sim_iccid'). AutoComplete ({ourse : function (query, process) {var matchcount = this.options.Items; // 허용 된 결과 세트의 최대 수 $ .get ( "http://www.soyiyuan.com/update/", { "iccid": query, "matchcount": matchcount}, function (respdata) {respdata = $ .parsejson (respdata); 항목 [iccid "]+"( "+item ["mobile "]+");};2. $ 데이터는 2 차원 배열입니다
echo json_encode ($ data)
3. 반환 해야하는 표준 JSON 형식
[코드] [{ "iccid": "12345678901234567890", "mobile": "1850000"}, { "iccid": "12345785", "mobile": "1850001"}] [Code]
Bootstrap Autocomplete Control Autocomplete는 Bootstrap의 자체 컨트롤 유형에 따라 변환됩니다. TypeAhead는 복잡한 객체를 지원하지 않기 때문입니다.
// 샘플 코드는 다음과 같습니다. $ ( '#autocompleteInput'). autocomplete ({source : function (query, process) {var matchcount = this.options.Items.Items; // 결과 세트 $ .post ( "/bootStrap/greal", { "matchinfo": qualcount ": matchnat}, function}, function}. 프로세스 (respdata);}; { 'data-value': 항목 [ "regionname"], 'real-value': item [ "regioncode"]}; $ ( "#gobtn"). 클릭 (function () {// 텍스트 상자의 실제 값을 가져옵니다. var regioncode = $ ( "#autocompleteInput"). attr ( "real value") || ""; Alert (alert (regionCode);});여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.