트위터 typeahead는 여러 가지 개선을 했습니다.

17625 단어 jQueryTwitterBootstrap
Bootstrap에도 autocomplete 기능인 typeahead가 있지만 일본어 사용은 어려울 것 같습니다.
Bootstrap Typeahead의 일본어 입력 지원
ARK 기술설명: Twitter Bootstrap] typeahead에서 일본어 입력 문제 해결 대책
하지만 Bootstrap 외에도 트위터에서 만든 typeahead 라이브러리가 있는데 이걸 사용하면 일본어 문제가 없는 것 같아요.그리고 기능도 강화됐다.
twitter/typeahead.js
typeahead.js – examples
그래서 샘플 몇 개 주세요.
또한 이 설명에서 typeahead를 사용합니다.js 버전은 0.9.3입니다.
2014년 2월 5일까지 버전은 0.10.0으로 설정이 다른 것 같습니다. (댓글 감사합니다.) 참고만 하겠습니다.

데이터 포함 예


가장 간단한 것은 데이터에 직접 삽입된 견본이다.
CSS는 jharding/typeahead.js-bootstrap.css 에서 대여됩니다.
<!DOCTYPE html>
<link href="bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="typeahead.js-bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
<div class="container">
  <h1>テスト</h1>
<input type="text" class="ta" name="name">
</div>
<script src="jquery.js" type="text/javascript"></script>
<script src="typeahead.js" type="text/javascript"></script>
<script src="sample.js" type="text/javascript"></script>
sample.js
$(function() {
  return $('.ta').typeahead({
    name: 'names',
    local: ["斉藤", "斉木", "大野", "大原"],
    limit: 10
  });
});

움직였다

json에서 다른 파일에 있는 예시


앞으로 서버에 없으면 움직이지 않을 것이다.
우선, 데이터 파일은 json 형식으로 단독으로 보유할 수 있다.
[
  {
    "value":"斉藤",
    "tokens":["さいとう","saito"]
  },{
    "value":"斉木",
    "tokens":["さいき","saiki"]
  },{
    "value":"大野",
    "tokens":["おおの","oono"]
  },{
    "value":"大原",
    "tokens":["おおはら","oohara"]
  }
]
여기 있다
* 값은 실제로 텍스트 상자의 값입니다.
*tokens는 입력한 문자열과 반응할 값을 수조로 추가합니다.
상술한 예에서'키토'는'사타마'와'사이토'에서 모두 큰 인기를 끌 수 있다고 설정했다.
서버의 적절한 위치에 저장 (이곳은 루트에 저장)
sample.js
$(function() {
  return $('.ta').typeahead({
    name: 'names',
    prefetch: '/sample.json',
    limit: 10
  });
});
(html 그대로 유지)


완성했습니다.

id도 hidden 필드로 저장하고 싶습니다.


이전 예제 사용자 데이터에서 각 사용자의 이름을 텍스트 상자에 추가
저장하고 싶을 뿐만 아니라 ID도 함께 저장하고 싶습니다.부서 정보 추가
템플릿 시스템을 이용해 보세요.템플릿 엔진은 본가를 모방한 것이다
twitter/hogan.js
이용하다.
준비한 샘플 json은 아래와 같습니다.
[
  {
    "value":"斉藤",
    "id": 1,
    "busho": "営業部",
    "tokens":["さいとう","saito"]
  },{
    "value":"斉木",
    "id": 2,
    "busho": "経理部",
    "tokens":["さいき","saiki"]
  },{
    "value":"大野",
    "id": 3,
    "busho": "営業部",
    "tokens":["おおの","oono"]
  },{
    "value":"大原",
    "id": 4,
    "busho": "管理部",
    "tokens":["おおはら","oohara"]
  }
]
html도 다음과 같이 ID의 hidden 속성을 유지하는 input를 준비합니다
<input class="ta" name="prefs" type="text" />
<input id="hidden_id" name="id" type="hidden" />
javascript 부분도 다음과 같이 변경됩니다.
sample.js
$(function() {
  return $('.ta').typeahead({
    name: 'name-busho2',
    prefetch: '/sample.json',
    template: '<div style="width:10em"><p style="float:right">{{busho}}</p><p>ID:{{id}}</p><p style="font-weight:bold">{{value}}</p></div>',
    engine: Hogan
  }).on("typeahead:selected typeahead:autocomplete", function(e, datum) {
    return $('#hidden_id').val(datum.id);
  });
});
여기,name 속성을 잠시 변경합니다.
또한template에서 명중한 내용을 어떻게 표시하는지 여기서 자유롭게 지정할 수 있습니다.내용은 일반적인 HTML입니다. 코드에 그 항목 이름을 삽입할 수 있습니다. (이 표기는 템플릿 엔진 호건의 표기법입니다.)나는 이런 자유가 트위터 typeahead의 매력이라고 생각한다.Bootstrap의 typeahead도 할 수 있지만 귀찮을 거예요.이렇게 하면 value와 ID뿐만 아니라 자유롭게 항목을 추가하고 처리할 수 있다.
실제 선택된 처리는 사용자 정의 이벤트typeahead:selected 및typeahead:autocomplete을 정의하므로 on("typeahead～ 아래에 이 이벤트가 발생했을 때의 처리를 기술합니다.
function은 e와datum 두 개의 매개 변수를 취하지만,datum에는 실제 선택한 대상의 정보가 포함되어 있습니다.id는 datum.id로 취득한 것이기 때문에 이후에는 일반적으로 규정된 값으로만 설정됩니다(부서 정보도datum.busho 등 다른 값을 자유롭게 취득할 수 있습니다).
실제 화면은 이런 느낌이다.

Firebug에서 hidden_id를 보십시오. 업데이트되었습니다.

원격 교환


여기까지 하면 간단해요. 자바스크립트 코드의prefetch: ～부분remote: "/usr/find/%QUERY"aax 통신으로 변경합니다.타자된 내용이 %QUERY에 들어갔다.그래서 단순히remote: "/usr/find?name=%QUERY"이렇게 하면 서버에서params[:name]의 유형을 보충할 수 있습니다.
물론 서버의 대답 json은 나무랄 데가 없다.
또한 상술한 리모트 설정은 간략판이고 상세판은 리모트 부분이다
remote: {
    url: '/states?q=%WILDCARD',
    wildcard: '%WILDCARD',
    rateLimitFn: 'throttle',
    rateLimitWait: 300, // rateLimitWait or wait? i think i prefer the former
    maxConcurrentConnections: 4,
    dataType: 'json',
    timeout: 2000,
    cache: true,
    beforeSend: function(jqXhr, settings) { /* set headers, etc. */ },
    filter: function(resp) { /* parse suggestions out of response  */ }
  }
이러한 옵션을 지정할 수 있습니다.
LeetCode 중복 이메일 삭제
👾 순수 CSS 게임보이

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage