복붙노트

[JQUERY] 부트 스트랩 선행 입력 아약스 예를 트위터

JQUERY

부트 스트랩 선행 입력 아약스 예를 트위터

해결법

  1. 1.편집 : 선행 입력이 더 이상 확인 3. 부트 스트랩에 번들로 제공됩니다 :

    편집 : 선행 입력이 더 이상 확인 3. 부트 스트랩에 번들로 제공됩니다 :

    2.3.2 최대 부트 스트랩 2.1.0로, 당신은이 작업을 수행 할 수 있습니다 :

    $('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            return process(data.options);
        });
    }
});

    이 같은 JSON 데이터를 소비하려면 :

    {
    "options": [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4",
        "Option 5"
    ]
}

    JSON 데이터가 JQuery와 JSON로 인식하므로 올바른 MIME 타입 (응용 프로그램 / JSON)이어야합니다.

  2. 2.당신은 아약스 통화를 지원하는 BS 선행 입력 포크를 사용할 수 있습니다. 그럼 당신은 쓸 수 있습니다 :

    당신은 아약스 통화를 지원하는 BS 선행 입력 포크를 사용할 수 있습니다. 그럼 당신은 쓸 수 있습니다 :

    $('.typeahead').typeahead({
    source: function (typeahead, query) {
        return $.get('/typeahead', { query: query }, function (data) {
            return typeahead.process(data);
        });
    }
});

  3. 3.부트 스트랩 2.1.0 시작 :

    부트 스트랩 2.1.0 시작 :

    HTML :

    <input type='text' class='ajax-typeahead' data-link='your-json-link' />

    자바 스크립트 :

    $('.ajax-typeahead').typeahead({
    source: function(query, process) {
        return $.ajax({
            url: $(this)[0].$element[0].dataset.link,
            type: 'get',
            data: {query: query},
            dataType: 'json',
            success: function(json) {
                return typeof json.options == 'undefined' ? false : process(json.options);
            }
        });
    }
});

    지금 당신은 당신의 HTML 코드에 "JSON 요청"링크를 배치, 통일 된 코드를 만들 수 있습니다.

  4. 4.모든 응답은 더 이상 부트 스트랩 3에 존재하는 부트 스트랩이 선행 입력,를 참조하십시오.

    모든 응답은 더 이상 부트 스트랩 3에 존재하는 부트 스트랩이 선행 입력,를 참조하십시오.

    새로운 포스트 부트 스트랩 트위터 typeahead.js를 사용하여 AJAX 예제를 찾고 다른 여기로 누군가를 위해, 여기에 작동하는 예입니다. 구문은 약간 다릅니다 :

    $('#mytextquery').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  limit: 12,
  async: true,
  source: function (query, processSync, processAsync) {
    processSync(['This suggestion appears immediately', 'This one too']);
    return $.ajax({
      url: "/ajax/myfilter.php", 
      type: 'GET',
      data: {query: query},
      dataType: 'json',
      success: function (json) {
        // in this example, json is simply an array of strings
        return processAsync(json);
      }
    });
  }
});

    당신은 몇 가지 옵션이 바로 다음 다른 사람이 추가됩니다 표시 볼 수있을 거라고, 그래서이 예제는 동기 (processSync 호출) 및 비동기 제안을 모두 사용합니다. 당신은 하나 또는 다른 사용할 수 있습니다.

    텍스트 등의 항목을 렌더링하기 위해 사용자 정의 표시 기능을 사용하는 것이 경우 오히려 문자열보다 객체 작업을 포함 바인딩 이벤트와 매우 강력한 옵션, 많이 있습니다.

  5. 5.나는 아약스 기능을 원래의 선행 입력 부트 스트랩 플러그인을 증강했습니다. 아주 사용하기 쉬운 :

    나는 아약스 기능을 원래의 선행 입력 부트 스트랩 플러그인을 증강했습니다. 아주 사용하기 쉬운 :

    $("#ajax-typeahead").typeahead({
     ajax: "/path/to/source"
});

    여기 github의의 REPO는 다음과 같습니다 아약스 - 선행 입력

  6. 6.나는 JQuery와 - ui.min.js에 일부 수정을했다 :

    나는 JQuery와 - ui.min.js에 일부 수정을했다 :

    //Line 319 ORIG:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").appendTo(d(...
// NEW:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").addClass("typeahead").addClass("dropdown-menu").appendTo(d(...

// Line 328 ORIG:
this.element.addClass("ui-menu ui-widget ui-widget-content ui-corner-all").attr...
// NEW:this.element.attr....

// Line 329 ORIG:
this.active=a.eq(0).children("a")
this.active.children("a")
// NEW:
this.active=a.eq(0).addClass("active").children("a")
this.active.removeClass("active").children("a")`

    그리고 다음 CSS를 추가

    .dropdown-menu {
    max-width: 920px;
}
.ui-menu-item {
    cursor: pointer;        
}

    완벽하게 작동합니다.

  7. 7.나는이 방법을 사용하고 있습니다

    나는이 방법을 사용하고 있습니다

    $('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
    {
    name: 'options',
    displayKey: 'value',
    source: function (query, process) {
        return $.get('/weather/searchCity/?q=%QUERY', { query: query }, function (data) {
            var matches = [];
            $.each(data, function(i, str) {
                matches.push({ value: str });
            });
            return process(matches);

        },'json');
    }
});

  8. 8.하나는 부트 스트랩을 사용하여 전화를 걸 수 있습니다. 현재 버전은 모든 소스 업데이트 문제가되지 않습니다 포스트 응답 문제 업데이트 부트 스트랩의 선행 입력 데이터 소스 일단 부트 스트랩 업데이트의 소스, 즉 다시 수정 될 수있다.

    하나는 부트 스트랩을 사용하여 전화를 걸 수 있습니다. 현재 버전은 모든 소스 업데이트 문제가되지 않습니다 포스트 응답 문제 업데이트 부트 스트랩의 선행 입력 데이터 소스 일단 부트 스트랩 업데이트의 소스, 즉 다시 수정 될 수있다.

    예를 들어 아래를 참조하십시오 :

    jQuery('#help').typeahead({
    source : function(query, process) {
        jQuery.ajax({
            url : "urltobefetched",
            type : 'GET',
            data : {
                "query" : query
            },
            dataType : 'json',
            success : function(json) {
                process(json);
            }
        });
    },
    minLength : 1,
});

  9. 9.허용 대답의 커피 스크립트 버전을 찾는 사람들에게 :

    허용 대답의 커피 스크립트 버전을 찾는 사람들에게 :

    $(".typeahead").typeahead source: (query, process) ->
  $.get "/typeahead",
    query: query
  , (data) ->
    process data.options

  10. 10.PHP 파일에이 붙여 있는지에 포함 할 - 내가 제대로 결국 작업 할 내가 100 % 작동 데모를 참조 여기를 붙여 있도록 몇 가지 답변에서 함께 비트를 조합해서이 게시물에 모든 것을 didnt 한 겪었 바로 이곳.

    PHP 파일에이 붙여 있는지에 포함 할 - 내가 제대로 결국 작업 할 내가 100 % 작동 데모를 참조 여기를 붙여 있도록 몇 가지 답변에서 함께 비트를 조합해서이 게시물에 모든 것을 didnt 한 겪었 바로 이곳.

    <?php if (isset($_GET['typeahead'])){
    die(json_encode(array('options' => array('like','spike','dike','ikelalcdass'))));
}
?>
<link href="bootstrap.css" rel="stylesheet">
<input type="text" class='typeahead'>
<script src="jquery-1.10.2.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('index.php?typeahead', { query: query }, function (data) {
            return process(JSON.parse(data).options);
        });
    }
});
</script>

  11. 11.서비스가 올바른 응용 프로그램 / JSON 콘텐츠 형식 헤더를 반환하지 않는 경우이 시도 :

    서비스가 올바른 응용 프로그램 / JSON 콘텐츠 형식 헤더를 반환하지 않는 경우이 시도 :

    $('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            var json = JSON.parse(data); // string to json
            return process(json.options);
        });
    }
});

  12. 12.UPDATE :이 포크를 사용하여 내 코드를 수정

    UPDATE :이 포크를 사용하여 내 코드를 수정

    토미 슬라브 Markovski에 의해 제안 대신 $를 사용하는 나는 .MAP $로 변경 .each

    $('#manufacturer').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data, item){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer
                    };
                    manufacturers.push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'name',
    items:11,
    onselect: function (obj) {

    }
});

    그러나 나는 얻어서 몇 가지 문제가 발생하고

    당신이 새로운 게시물에 볼 수 여기 알아 내려고 노력하고 있어요

    이 업데이트는 당신에게 어떤 도움의 희망 ...

  13. 13.나는 당신을 위해 작업 예제를 가지고도 내가 매우 깨끗한 솔루션을 수행하지만, 제가 발견 한 무엇을 이야기하지 않습니다.

    나는 당신을 위해 작업 예제를 가지고도 내가 매우 깨끗한 솔루션을 수행하지만, 제가 발견 한 무엇을 이야기하지 않습니다.

    당신이 선행 입력을위한 자바 스크립트 코드를 볼 경우는 다음과 같습니다 :

    items = $.grep(this.source, function (item) {
    if (that.matcher(item)) return item
  })

    이 코드는 소스 배열의 요소와 일치하는 jQuery를 "그렙"방법을 이용한다. 나는 당신이 AJAX 호출에 훅 수있는 장소를 보지 못했다, 그래서 "깨끗한"해결책이 거기 아니다.

    그러나, 당신이 할 수있는 일이 다소 해키 방법은 GREP 방법은 jQuery를 작동하는 방식을 활용하는 것입니다. 그렙에 첫 번째 인수는 소스 배열이고 두 번째 인자는 (통지 부트 스트랩은 "정규"당신이 그것을 초기화 할 때 제공 호출) 소스 배열과 일치하는 데 사용되는 기능입니다. 당신은 무엇을 할 수는 더미 하나의 요소의 배열에 소스를 설정하고있는 AJAX 호출로 함수로 정규 표현을 정의한다. (소스 배열 만에 하나 개의 요소를 가지고 있기 때문에) 그런 식으로, 그냥 한 번 AJAX 호출을 실행합니다.

    이 솔루션뿐만 아니라 해키이지만, 선행 입력 코드가 키를 누를 때마다에 조회를 (AJAX 호출이 정말 매 몇 번의 키 입력 또는 유휴 일정 시간 후에 발생한다) 할 수 있도록 설계되어 있기 때문에 그것은 성능 문제에서 겪게됩니다. 내 조언은 다른 자동 완성 라이브러리 중 하나에 그것을 시도하지만, 스틱을 제공하거나 문제가 발생하면 유일한 비 AJAX 상황이를 사용하는 것입니다.

  14. 14.아약스를 사용하는 경우, 대신에 $ 갔지 ()는 결과의 올바른 표시에 문제가있는 경우의) $ .getJSON을 (시도.

    아약스를 사용하는 경우, 대신에 $ 갔지 ()는 결과의 올바른 표시에 문제가있는 경우의) $ .getJSON을 (시도.

    내가 $ 갔지 ()를 사용할 때 내가로 json_encode () 서버 측을 사용하지만, 내 경우에는 내가 모든 결과의 첫 번째 문자를 얻었다.

  15. 15.나는 $ ()를 사용합니다. 한 () 이를 해결하기 위해; 페이지가로드 할 때 수행에, 나는 서버와 대기로 아약스를 보냅니다. 그런 함수 결과를 전달한다. $ (). 일 ()는 중요한 .Because 동력 typehead.js 입력 한 시간을 첨부한다. 죄송 나쁜 쓰기.

    나는 $ ()를 사용합니다. 한 () 이를 해결하기 위해; 페이지가로드 할 때 수행에, 나는 서버와 대기로 아약스를 보냅니다. 그런 함수 결과를 전달한다. $ (). 일 ()는 중요한 .Because 동력 typehead.js 입력 한 시간을 첨부한다. 죄송 나쁜 쓰기.

    (($) => { VAR substringMatcher = 함수 (strs) { 창 함수 findMatches (Q, CB) { VAR는 substringRegex 일치; // 하위 문자열 일치로 채워집니다 배열 일치 = []; // 정규식은 문자열이 문자열`q`가 포함되어있는 경우 결정하는 데 사용 substrRegex 새로운 정규식 = (Q를, 'I'); // 반복 처리를 캐릭터 라인의 풀 통해 임의의 문자열이에 대한 //은`matches` 배열에 추가 문자열`q`를 포함 .each (strs, 함수 $ (I, STR) { 경우 (substrRegex.test (STR)) { (STR) matches.push; } }); CB (일치하는); }; }; VAR 상태 = []; {(아약스 $ URL : 'https://baconipsum.com/api/?type=meat-and-filler' 입력 : '수' }). 다 (기능 (데이터) { $ ( '. 선행 입력').을 (). 선행 입력을 ({ 힌트 : 사실, 하이라이트 : 사실, MINLENGTH : 1 }, { 이름 : '상태' 소스 : substringMatcher (데이터) }); }) }) (jQuery를); .TT 쿼리, / * 업데이트 : 새로운 버전 대신 TT-쿼리의 TT-입력을 사용 * / .TT - 힌트 { 폭 : 396px; 높이 : 30 픽셀; 패딩 : 8px 12 픽셀; 폰트 크기 : 24 픽셀; 라인 높이 : 30 픽셀; 국경 : 2 픽셀 고체 #ccc; 경계 반경 : 8px; 개요 : 없음; } .TT 쿼리 {/ * 업데이트 : 새로운 버전 대신 TT-쿼리의 TT-입력을 사용 * / 상자 그림자 : 인셋 0 1 픽셀 1 픽셀 RGBA (0, 0, 0, 0.075); } .TT - 힌트 { 색상 : # 999; } .TT 메뉴 {/ * 업데이트 : 새로운 버전 대신 TT-드롭 다운 메뉴의 TT-메뉴를 사용 * / 폭 : 422px; 여백 - 상단 : 12 픽셀; 패딩 : 8px 0; 배경 색상 : #fff; 국경 : 1 픽셀의 고체 #ccc; 테두리 : 1 픽셀 고체 RGBA (0, 0, 0, 0.2); 경계 반경 : 8px; 상자 그림자 : 0 5px 10px RGBA (0,0,0, 0.2); } .TT-제안 { 패딩 : 3px의 20 픽셀; 폰트 사이즈 : 18px; 라인 높이 : 24 픽셀; 커서 : 포인터; } .TT-제안 : 가져가 { 색상 : # f0f0f0; 배경 색상 : # 0097cf; } .TT-P {제안 여백 : 0; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <스크립트 SRC = "https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js">

  16. 16.

     $('#runnerquery').typeahead({
        source: function (query, result) {
            $.ajax({
                url: "db.php",
                data: 'query=' + query,            
                dataType: "json",
                type: "POST",
                success: function (data) {
                    result($.map(data, function (item) {
                        return item;
                    }));
                }
            });
        },
        updater: function (item) {
        //selectedState = map[item].stateCode;

       // Here u can obtain the selected suggestion from the list


        alert(item);
            }

    }); 

 //Db.php file
<?php       
$keyword = strval($_POST['query']);
$search_param = "{$keyword}%";
$conn =new mysqli('localhost', 'root', '' , 'TableName');

$sql = $conn->prepare("SELECT * FROM TableName WHERE name LIKE ?");
$sql->bind_param("s",$search_param);            
$sql->execute();
$result = $sql->get_result();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
    $Resut[] = $row["name"];
    }
    echo json_encode($Result);
}
$conn->close();

    ?>

    17. from https://stackoverflow.com/questions/9232748/twitter-bootstrap-typeahead-ajax-example by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery로 이스케이프 키에 대한 어떤 키 코드  (0) 2020.10.14
[JQUERY] 텍스트에서 모든 공백을 제거  (0) 2020.10.14
[JQUERY] 어떻게 jQuery로 다른 하나의 요소에 상대적인 위치를 하는가?  (0) 2020.10.13
[JQUERY] 연기 jQuery를 어떻게 사용할 수 있습니까?  (0) 2020.10.13
[JQUERY] jQuery.ajax () 메소드의 비동기 옵션은 더 이상 사용되지, 지금 무엇?  (0) 2020.10.13
,

티스토리툴바