twitter bootstrap ตัวอย่างเช่นอาแจ็กซ์

ฉันกำลังพยายามหาตัวอย่างการทำงานขององค์ประกอบตัวพิมพ์twitter bootstrapที่จะทำการโทร ajax เพื่อเติมลงมัน

ฉันมีตัวอย่างการเติมข้อความอัตโนมัติ jQuery ที่ใช้งานอยู่ซึ่งกำหนด ajax url เป็นและวิธีการตอบกลับ

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { minChars:3, max:20 };
    $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

ฉันต้องเปลี่ยนอะไรเพื่อแปลงสิ่งนี้เป็นตัวอย่างของหัวพิมพ์?

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { source:'/index/runnerfilter/format/html', items:5 };
    $("#runnerquery").typeahead(options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

ฉันจะรอการแก้ไขปัญหา ' เพิ่มแหล่งที่มาระยะไกลสำหรับ typeahead '

แก้ไข: typeahead ไม่ได้รวมอยู่ใน Bootstrap 3. ลองดู:

• โมดูล JavaScript typeahead อยู่ที่ไหนใน Bootstrap 3 RC 1
• typeahead.js

ตั้งแต่ Bootstrap 2.1.0 จนถึง 2.3.2 คุณสามารถทำสิ่งนี้ได้:

$('.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 ต้องเป็นประเภท mime ที่เหมาะสม (application / json) ดังนั้น jQuery จึงรับรู้ว่าเป็น JSON

คุณสามารถใช้BS Typeahead forkซึ่งรองรับการโทร ajax จากนั้นคุณจะสามารถเขียน:

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

เริ่มต้นจาก Bootstrap 2.1.0:

HTML:

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

javascript:

$('.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);
            }
        });
    }
});

ตอนนี้คุณสามารถสร้างรหัสแบบรวมได้โดยวางลิงก์ "json-request" ใน HTML-code ของคุณ

การตอบสนองทั้งหมดอ้างถึง BootStrap 2 typeahead ซึ่งไม่มีอยู่ใน BootStrap 3 อีกต่อไป

สำหรับทุกคนที่กำกับที่นี่กำลังมองหาตัวอย่าง AJAX โดยใช้ post-Bootstrap Twitter typeahead.jsใหม่นี่เป็นตัวอย่างการทำงาน ไวยากรณ์แตกต่างกันเล็กน้อย:

$('#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 ) และคำแนะนำแบบอะซิงโครนัสดังนั้นคุณจะเห็นตัวเลือกบางอย่างปรากฏขึ้นทันทีจากนั้นผู้อื่นจะถูกเพิ่ม คุณสามารถใช้อย่างใดอย่างหนึ่ง

มีเหตุการณ์ที่ผูกมัดจำนวนมากและตัวเลือกที่ทรงพลังบางอย่างรวมถึงการทำงานกับวัตถุมากกว่าสตริงในกรณีนี้คุณจะใช้ฟังก์ชั่นการแสดงผลที่กำหนดเองของคุณเองเพื่อแสดงรายการของคุณเป็นข้อความ

ฉันได้เพิ่มปลั๊กอิน Bootstrap typeahead ดั้งเดิมที่มีความสามารถ ajax ใช้งานง่ายมาก:

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

นี่คือ repo github: Ajax-Typeahead

ฉันทำการแก้ไขบางอย่างใน 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;        
}

ทำงานได้สมบูรณ์แบบ

ฉันใช้วิธีนี้

$('.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');
    }
});

หนึ่งสามารถโทรโดยใช้ Bootstrap รุ่นปัจจุบันไม่มีปัญหาการอัพเดทใด ๆ ปัญหาในการอัปเดตแหล่งหัวพิมพ์ Bootstrap ของแหล่งข้อมูลด้วยการตอบสนองโพสต์ นั่นคือที่มาของ bootstrap เมื่อการปรับปรุงสามารถแก้ไขได้อีกครั้ง

โปรดดูตัวอย่างด้านล่าง:

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,
});

สำหรับผู้ที่กำลังมองหาคำตอบที่ได้รับการยอมรับ:

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

ฉันผ่านโพสต์นี้และทุกอย่างไม่ต้องการทำงานอย่างถูกต้องและในที่สุดก็ปะติดปะต่อบิตจากคำตอบสองสามข้อดังนั้นฉันจึงมีตัวอย่างการทำงาน 100% และจะวางไว้ที่นี่เพื่ออ้างอิง - วางสิ่งนี้ลงในไฟล์ php และตรวจสอบให้แน่ใจว่า สถานที่ที่เหมาะสม

<?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>

ลองทำเช่นนี้หากบริการของคุณไม่ได้ส่งคืนส่วนหัวของประเภทแอปพลิเคชัน / 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);
        });
    }
});

UPDATE: ฉันแก้ไขรหัสโดยใช้ทางแยกนี้

แทนการใช้ $. แต่ละฉันเปลี่ยนเป็น $ .map ตามที่ Tomislav Markovski แนะนำ

$('#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) {

    }
});

อย่างไรก็ตามฉันกำลังประสบปัญหาบางอย่างจากการได้รับ

Uncaught TypeError: ไม่สามารถเรียกเมธอด 'toLowerCase' ที่ไม่ได้กำหนด

อย่างที่คุณเห็นในโพสต์ที่ใหม่กว่าฉันพยายามคิดที่นี่

หวังว่าการอัปเดตนี้จะช่วยคุณได้ ...

ฉันไม่มีตัวอย่างการทำงานสำหรับคุณหรือฉันไม่มีวิธีแก้ปัญหาที่สะอาดมาก แต่ให้ฉันบอกสิ่งที่ฉันพบ

หากคุณดูโค้ดจาวาสคริปต์สำหรับ TypeAhead จะมีลักษณะดังนี้:

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

รหัสนี้ใช้วิธีการ jQuery "grep" เพื่อจับคู่องค์ประกอบในอาร์เรย์ที่มา ฉันไม่เห็นสถานที่ใดที่คุณสามารถขอสาย AJAX ได้ดังนั้นจึงไม่มีทางออกที่ "สะอาด" สำหรับเรื่องนี้

อย่างไรก็ตามวิธีหนึ่งที่ค่อนข้างแฮ็กที่คุณสามารถทำได้คือการใช้ประโยชน์จากวิธีการทำงานของ grep ใน jQuery อาร์กิวเมนต์แรกของ grep คืออาร์เรย์ต้นทางและอาร์กิวเมนต์ที่สองคือฟังก์ชันที่ใช้จับคู่อาร์เรย์ต้นทาง (สังเกต Bootstrap เรียกว่า "matcher" ที่คุณระบุเมื่อคุณเตรียมข้อมูลเบื้องต้น) สิ่งที่คุณสามารถทำได้คือตั้งค่าแหล่งที่มาให้เป็นอาเรย์แบบจำลององค์ประกอบเดียวและกำหนดตัวจับคู่เป็นฟังก์ชันที่มีการเรียก AJAX ด้วยวิธีดังกล่าวมันจะเรียกใช้ AJAX เพียงครั้งเดียว (เนื่องจากอาร์เรย์ต้นทางของคุณมีองค์ประกอบหนึ่งอยู่ในนั้น)

โซลูชันนี้ไม่เพียง แต่จะแฮ็ก แต่จะประสบปัญหาด้านประสิทธิภาพเนื่องจากรหัส TypeAhead ถูกออกแบบมาเพื่อทำการค้นหาในทุกการกดปุ่ม (การโทร AJAX ควรเกิดขึ้นในทุกการกดแป้นบางครั้งหรือหลังจากเวลาที่ไม่ได้ใช้งาน) คำแนะนำของฉันคือให้ลองใช้ แต่ใช้ไลบรารีเติมข้อความอัตโนมัติอื่นหรือใช้เฉพาะกับสถานการณ์ที่ไม่ใช่ AJAX หากคุณพบปัญหาใด ๆ

เมื่อใช้ Ajax ให้ลอง$.getJSON()แทน$.get()หากคุณมีปัญหากับการแสดงผลที่ถูกต้อง

ในกรณีของฉันฉันได้เฉพาะอักขระตัวแรกของทุกผลลัพธ์เมื่อฉันใช้$.get()แม้ว่าฉันจะใช้json_encode()ฝั่งเซิร์ฟเวอร์

ฉันใช้$().one() สำหรับแก้ปัญหานี้ เมื่อโหลดหน้าเว็บฉันส่ง ajax ไปยังเซิร์ฟเวอร์และรอให้เสร็จ จากนั้นส่งผ่านผลลัพธ์ไปยังฟังก์ชัน $().one()เป็นสิ่งสำคัญเนื่องจากบังคับให้typehead.jsแนบกับอินพุตหนึ่งครั้ง ขอโทษที่เขียนไม่ดี

(($) => {
    
    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)) {
              matches.push(str);
            }
          });
          cb(matches);
        };
      };
      
      var states = [];
      $.ajax({
          url: 'https://baconipsum.com/api/?type=meat-and-filler',
          type: 'get'
      }).done(function(data) {
        $('.typeahead').one().typeahead({
            hint: true,
            highlight: true,
            minLength: 1
          },
          {
            name: 'states',
            source: substringMatcher(data)
          });
      })
      

})(jQuery);

.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
}

.tt-suggestion:hover {
    color: #f0f0f0;
    background-color: #0097cf;
}

.tt-suggestion p {
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<input class="typeahead" type="text" placeholder="where ?">

 $('#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();

?>