2014-03-28 2 views
4

http://twitter.github.io/typeahead.js/examples/ 에서 '기본 사항'예제를 복사하고 있으며 일반 HTML 페이지에서이 기능을 사용할 수 없습니다.typeahead.js 기본 예제가 작동하지 않습니다.

사실 웹 전체에서 많은 코드 샘플을 시도했지만 아무 것도 작동하지 않는 것 같습니다. 이것은 내가 잘못된 버전의 스크립트 라이브러리를 사용하고 있다고 생각하게 만듭니다 (아래 참조). 내가 위를 실행하면 내가 텍스트 상자에 입력 할 때

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" /> 
    <script src="bootstrap.min.js" /> 
    <script src="typeahead.js" /> 

    <script> 

     var substringMatcher = function (strs) { 
      return function findMatches(q, cb) { 
       var matches, substringRegex; 

       // an array that will be populated with substring matches 
       matches = []; 

       // regex used to determine if a string contains the substring `q` 
       substrRegex = new RegExp(q, 'i'); 

       // iterate through the pool of strings and for any string that 
       // contains the substring `q`, add it to the `matches` array 
       $.each(strs, function (i, str) { 
        if (substrRegex.test(str)) { 
         // the typeahead jQuery plugin expects suggestions to a 
         // JavaScript object, refer to typeahead docs for more info 
         matches.push({ value: str }); 
        } 
       }); 

       cb(matches); 
      }; 
     }; 

     var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 
      'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 
      'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 
      'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 
      'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 
      'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 
      'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 
      'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 
      'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' 
      ]; 

     $('#the-basics .typeahead').typeahead({ 
      hint: true, 
      highlight: true, 
      minLength: 1 
     }, 
     { 
      name: 'states', 
      displayKey: 'value', 
      source: substringMatcher(states) 
     }); 

</script> 
</head> 

<body> 

    <div id="the-basics"> 
     <input class="typeahead" type="text" placeholder="States of USA"> 
    </div> 

</body> 
</html> 

는, 아무 일도 발생하지 :

여기 내 코드의 '기본 사항'예입니다.

내 스크립트 참조가 맞습니까? 보시다시피 저는 jQuery의 v1.11.0을 참조하고 있습니다. 로컬 부트 스트랩 .min.js 버전은 v3.1.1입니다. typeahead.js 내 로컬 버전은 내가 IE9와 크롬 22.x

어떤 도움에 매우 감사에 노력했다 0.10.2

입니다. 마틴

+0

그래서 당신이 해결 않았다 어떻게 ...? – headkit

+0

다음은 스크립트 블록의 첫 번째 줄에서 누락되었습니다 (예제에서도 마찬가지입니다). 내 jQuery는 그렇게 좋지 않다! $ (document) .ready (function() { – Martin

답변

4

다음 첫 번째 줄은 스크립트 블록 (및 예제에서도)에서 누락되었습니다. 내 jQuery는 그렇게 좋지 않다!

<script> 

    $(document).ready(function() { 

    var substringMatcher = function (strs) { 
     return function findMatches(q, cb) { 
      var matches, substringRegex; 

      // an array that will be populated with substring matches 
      matches = []; 

      // regex used to determine if a string contains the substring `q` 
      substrRegex = new RegExp(q, 'i'); 

      // iterate through the pool of strings and for any string that 
      // contains the substring `q`, add it to the `matches` array 
      $.each(strs, function (i, str) { 
       if (substrRegex.test(str)) { 
        // the typeahead jQuery plugin expects suggestions to a 
        // JavaScript object, refer to typeahead docs for more info 
        matches.push({ value: str }); 
       } 
      }); 

      cb(matches); 
     }; 
    }; 

    var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 
     'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 
     'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 
     'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 
     'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 
     'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 
     'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 
     'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 
     'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' 
     ]; 

    $('#the-basics .typeahead').typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 1 
    }, 
    { 
     name: 'states', 
     displayKey: 'value', 
     source: substringMatcher(states) 
    }); 
} 

1

나는 cdnjs에서 typeahed을 사용하고 작동하는 것 같다 jsfiddle를 만들었습니다. 나는 이전 버전이 있었지만이 버전은 0.10.2이라는 것을 알고 있습니다.

//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.2/typeahead.bundle.min.js 
관련 문제