แก้ปัญหา Autocomplete ที่ชื่อว่า typeahead มักจะเลือกรายการแรกทุกครั้งที่ค้นหา

เปลี่ยนจากเลือกรายการแรกอัตโนมัติแบบรูปด้านซ้าย => เป็นเลือกเองแบบด้านขวา

ตัว Bootstrap Framework จะมี Autocomplete ที่ชื่อว่า typeahead ปัญหาคือ เวลากดพิมพ์ลงไป พอมันเด้งข้อมูลขึ้นมา มันก็เลือกตัวแรกให้ ทำให้กด Enter มันก็มาทันที

แก้ให้มันไม่ select อัตโนมัติก็ใช้โค้ดประมาณนี้

<script>
    // Initialize typeahead
    $("input").typeahead(...);


    // เริ่มคัดลอกโค้ดจากส่วนนี้เป็นต้นไป =>
    // Get the current typeahead instance
    var typeaheadInstance = $("input").data("typeahead");

    // Save the reference to the original implementation of the render() function
    var origRenderFunc = typeaheadInstance.render;

    // Overwrite the render() function
    typeaheadInstance.render = function() {
        // Execute the original implementation
        var result = origRenderFunc.apply(this, arguments);
        // Remove the 'active' class from the first item
        result.$menu.children().first().removeClass("active")

        return result;
    }

    // <= สิ้นสุดโค้ดที่ต้องใช้

</script>

 ตรงส่วนของ $("input").typeahead(...); คือฟังก์ชั่นที่เราสร้างไว้แล้ว ไม่ต้องนำไปใส่ในโค้ดเรา เอาเฉพาะส่วนที่ถัดมา ตั้งแต่

var typeaheadInstance = $("input").data("typeahead");

 โดยที่ $("input") ให้เปลี่ยนไปตามไอดีของ input ที่ต้องใช้

เพียงเท่านี้ก็จะได้ Autocomplete ที่ไม่เลือกรายการแรกอัตโนมัติ ทำให้เวลากด Enter ไม่ไปเลือกรายการที่เราไม่ได้ต้องการขึ้นมาอีก

ที่มา : https://bibwild.wordpress.com/2013/04/04/overriding-bootstrap-typeahead-to-not-initially-select/