부트 스트랩 태그 입력이 작동하지 않습니다.

이 입력은 bootstrap-tagsinputs 플러그인을 사용하고 있습니다. 문제는 내가 태그를 자동 완성하고 싶지 않아서 그 일을하지 않는 것입니다!부트 스트랩 태그 입력이 작동하지 않습니다.

태그 부분은 완벽하게 작동합니다)하지만, 자동 완성의 일부가 나던 :(

사람은 예 플러그인 페이지에있는 것과 같은 이유? 아이디어가 있습니다

http://timschlechter.github.io/bootstrap-tagsinput/examples/

을 . 난 내가 잘못하고 내가 이미 선행 입력 플러그인과 tagsinput 플러그인을 포함 시켰습니다

<input id="tags-text-input"></input> 

$("#tags-text-input").ready(function() { 
      $("#tags-text-input").tagsinput(); 
      $("#tags-text-input").typeahead({ 
       typeahead: ["I'm done trying...", "Jhon", "Smith"] 
      }); 
     });

이 내 코드?

미리 감사드립니다.

출처

2014-03-24 danielrvt

[Typeahead 플러그인 및 부트 스트랩 태그 입력 플러그인이 작동하지 않습니다.] (http://stackoverflow.com/questions/21641417/typeahead-plugin-and-bootstrap-tags-input-plugin-meteor-not-working) –

난 당신과 같이 태그를 입력 내에서 설정 선행 입력에 필요가 있다고 생각 : 나는 하루 종일 너무이 고민 여기가 사방에서 데이터의 부스러기에 당겨 봤는데

<input id="tags-text-input"></input> 
$("#tags-text-input").ready(function() { 
    $("#tags-text-input").tagsinput({ 
     typeahead: { 
      source: ["I'm done trying...", "Jhon", "Smith"] 
     } 
    }); 
});

출처

2014-07-31 19:34:42 cmiz87

. 나는 그것이 작동 될 때까지 모든 외부 영향을 제거하기 위해 베어 본 프로젝트를 만들었고, 그런 다음 그것을 프로젝트에 성공적으로 전송할 수있었습니다.

개념을 얻을 수 있음을 증명하고 프로젝트와 비교할 수있는 실습 예제로 사용할 수 있어야하는 내 기본 프로젝트입니다.

자신에게 html 파일을 생성하고이 붙여 넣습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <title>TagsInput and TypeAhead TOGETHER!</title> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/bootstrap-tagsinput.css"> 
</head> 
<body> 
    <h1>TagsInput and TypeAhead TOGETHER!</h1> 

    <select id="Country"> 
     <option>UK Cars</option> 
     <option>German Cars</option> 
    </select> 

    <input type="text" id="carsSearch" placeholder="Type Car Names" /> 

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap-tagsinput.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap3-typeahead.js"></script> 
    <script type="text/javascript" src="js/tagsinput and typeahead.js"></script> 
</body> 
</html>

을 JS 폴더와 파일이라고 tagsinput 및 typeahead.js을 만들고이 붙여 넣습니다.

$(document).ready(
    function() { 
     // Call the data population 
     bindCarList(); 
    } 
); 

bindCarList = function() { 
    // Call TagsInput on the input, and set the typeahead source to our data 
    $('#carsSearch').tagsinput({ 
     typeahead: { 
      source: function() { 
       if ($('#Country').val() == "UK Cars") { 
        return ["Lotus", "TVR", "Jaguar", "Noble", "Land Rover", "Rover"]; 
       } else { 
        return ["BMW", "Audi", "Volkswagen", "Mercedes-Benz"]; 
       } 
      } 
     } 
    }); 

    $('#carsSearch').on('itemAdded', function (event) { 
     // Hide the suggestions menu 
     $('.typeahead.dropdown-menu').css('display', 'none') 
     // Clear the typed text after a tag is added 
     $('.bootstrap-tagsinput > input').val(""); 
    }); 
}

당신이 필요합니다 몇 가지 파일을 다운로드 할 수 있지만 가능하면 CDN을 사용하여 최소한으로 유지했습니다.

/css/bootstrap-tagsinput.css 및 https://github.com/bassjobsen/Bootstrap-3-Typeahead

그건에서 https://github.com/timschlechter/bootstrap-tagsinput/tree/master/src

/js/bootstrap3-typeahead.js에서

/js/bootstrap-tagsinput.min.js 완벽하지는 않습니다. 태그를 추가하면 검색 텍스트를 지우고 목록을 숨기는 해결 방법을 사용해야했습니다. 입력에서 탭을 벗어날 수는 없지만 큰 것은 아닙니다. 그것은 꽤 좋지만 누군가가 그것을 향상시킬 수 있습니다.

출처

2015-08-06 15:42:55 Red

부트 스트랩 태그 입력이 작동하지 않습니다.

답변

관련 문제