Autoahead.js 0.10 단계별 / remote / prefetch / local 사용방법

Autoahead.js 0.10 단계별 / remote / prefetch / local 사용방법

• Twitter 자동 검색용 POST

저는 로컬, 리모트 및 가져온 데이터를 사용하기 위해 automahead.js 0.10을 사용하는 방법을 이해하고 명확한 그림을 얻으려고 이틀 동안 노력했습니다.

솔직히 블러드하운드 엔진은 명확하지 않고 json 객체 및 어레이를 조작/접근하는 방법에 대한 자세한 정보는 여전히 물음표입니다.

로컬 예제를 사용할 수 있지만 프리페치 또는 리모트옵션을 사용하려고 할 때는 항상 체크 표시를 몇 번 하면 작업을 할 수 없습니다.

이 게시물의 목표는 단순히 내 문제에 대한 답을 얻는 것이 아니라, 내 문제에 대한 완전한 지식을 가지고 있는 사람을 찾는 것입니다.또한 json의 예를 포함한 매우 간단한 예와 jsfiddle을 통해 이 문제가 실제로 어떻게 해석되고 있는지를 단계별로 설명할 수 있습니다.

많은 사람들이 그것을 이해하기를 기대하고 있다고 생각합니다.그리고 이것은 큰 공헌이 될 것입니다(우리가 알고 있는 다른 상세한 투고가 존재하고 있기 때문에).

이건 힘든 일일 거예요.

기고해 주셔서 감사합니다.

아래 제안에 따라 주십시오.저의 간단한 예.

JSON 파일

   [
    {   "name": "Pink Floyd",
        "Album": "The Best Of Pink Floyd: A Foot In The Door",
        "Label": "EMI UK",
        "Tracks":"Hey You, See Emily Play, The Happiest Days Of Our Lives, Another Brick in The Wall (Part 2), Have a cigar, Wish You Where Here, Time, The Great Gig in the Sky, Money, Comfortably Numb, High Hopes, Learning to Fly, The Fletcher Memorial Home, Shine On You Crazy Diamond, Brain Damage, Eclipse" ,
        "Price": "16.40",
        "Genre": "Rock"

    },
    {
        "name": "Depeche Mode",
        "Album": "A Question Of Time",
        "Label": "Mute",
        "Tracks":"A Question Of Time, Black Celebration, Something To Do, Stripped, More Than A Party, A Question Of Time(extended), Black Celebration" ,
        "Price": "4.68" ,
        "Genre": "Rock"
    },
    {
        "name": "Placebo",
        "Album": "Street Halo/Kindred",
        "Label": "Hyperdub Japan",
        "Tracks":"Street Halo, NYC, Stolen Dog, Kindred, Loner, Ashtray Wasp" ,
        "Price": "14.06",
        "Genre": "Future Garage"

    }
  ]

자동 검색 스크립트

  <script>

  var products = new Bloodhound({
    datumTokenizer: function(d) {return d.name; },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'http://localhost/dh/js/products.json'


  });


  products.initialize();

  $('.test1').typeahead({
    highlight: true
  },
  {
    name: 'products',
    displayKey: 'num',
    source: states.ttAdapter()

  });

  </script>

HTML

   <script type="text/javascript" src="http://localhost/dh/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/bootstrap.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/typeahead.bundle.js"></script>

<div class="search_content">
    <input class="test1" type="text" placeholder="product">
</div>

저는 며칠 동안 이걸 스스로 작동시키기 위해 노력했습니다. 그리고 저는 이것이 직관적이지 않다는 것에 전적으로 동의해요.특히 블러드하운드에 대한 자동 검색 페이지에 한 가지 기능이 작동되지 않았습니다.예를 들어 다음 행이 있습니다.

datumTokenizer: Bloodhound.tokenizers.obj 를 지정합니다.공백 "value") -- obj가 존재하지 않기 때문에 항상 오류가 발생합니다.

기준의 경우토큰라이저는 다음 양식을 사용합니다(여기서 "DisplayText"는 표시할 텍스트를 포함하는 오브젝트의 속성 이름입니다.

function (d) {
            return Bloodhound.tokenizers.whitespace(d.DisplayText);
        }

또한 자동 검색을 작성할 때 표시하려는 텍스트 데이터가 있는 컬렉션의 속성 이름으로 displayKey를 설정하십시오.토큰화하려는 속성과 항상 같기 때문에 자동 검색 문장은 다음과 같습니다.

$('#my-typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 3
        },
    {
        name: 'someName',
        displayKey: 'DisplayText',
        source: myBloodhound.ttAdapter()
    }

변경처:

소스 : products.ttAdapter()

받아들여진 답변은 현재로선 맞지만 자동 검색 0.10이 오래 전에 사용되었기 때문에 그다지 유용하지 않습니다.현재 버전은 1.2.1(2018년 기준)

첫번째 질문에 , ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」
아직 유지 보수된 포크 - Typeahead v1.2.1을 기반으로 JS 피들과 함께 자동 검색(로컬, 프리페치, 원격 및 이들의 조합)을 사용하는 방법에 대한 단계별 설명이 있는 참조 튜토리얼이 있습니다.

언급URL : https://stackoverflow.com/questions/21710289/how-to-use-typeahead-js-0-10-step-by-step-remote-prefetch-local