টুইটার বুটস্ট্র্যাপ টাইপহেড এজাক্স উদাহরণ

Question

আমি টুইটার বুটস্ট্র্যাপ টাইপহেড উপাদানটির একটি কার্যকারী উদাহরণ সন্ধান করার চেষ্টা করছি যা এটি ড্রপডাউনটি তৈরি করতে একটি অজ্যাক্স কল করবে।

আমার একটি বিদ্যমান ওয়ার্কিং জ্যাকোয়ারি স্বয়ংসম্পূর্ণ উদাহরণ রয়েছে যা এজাক্স ইউআরএলকে সংজ্ঞায়িত করে এবং কীভাবে উত্তরটি প্রক্রিয়া করবে

<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];
                }
            );
       ..

আমি ' টাইপহেডের জন্য রিমোট উত্স সমর্থন যোগ করুন' সমস্যার সমাধানের জন্য অপেক্ষা করতে যাচ্ছি ।

Comments

আরও সুনির্দিষ্ট হওয়ার জন্য আমি ভাবছি যে কীভাবে স্বতঃপূরণ বিকল্পগুলি এবং ফলাফলগুলি পাঠ্য শিরোনাম বিকল্পগুলিতে ফাংশন মানচিত্র পরিচালনা করছে? ওভাররাইড করা যায় এমন সংজ্ঞায়িত পাঠ্যক্রম ফলাফলের হ্যান্ডলিং ফাংশনগুলির একটি সেট রয়েছে, বা অন্তর্নিহিত জ্যাকুরি এপি থেকে উত্তরাধিকারসূত্রে নামকৃত পদ্ধতি রয়েছে।

— পান্নাজভা

আপনি কি স্টিজন ভ্যান বালের উত্তরকে এখন সঠিক হিসাবে চিহ্নিত করতে পারেন? বোজার্টের উত্তর কেবল বুটস্ট্র্যাপের পুরানো সংস্করণে কাজ করে।

— গিলস রবার্টস

Answer 1

সম্পাদনা করুন: টাইপহেড আর বুটস্ট্র্যাপ 3 এ বান্ডিল হয় না Check

• বুটস্ট্র্যাপ 3 আরসি 1 তে টাইপহেড জাভাস্ক্রিপ্ট মডিউলটি কোথায়?
• typeahead.js

বুটস্ট্র্যাপ ২.১.০ পর্যন্ত ২.৩.২ পর্যন্ত আপনি এটি করতে পারেন:

$('.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 হিসাবে স্বীকৃতি দেয়।

Comments

টাইপহেড ফর্ক হিসাবে, ডেটা অবশ্যই স্ট্রিংগুলির একটি জেএসওএন অ্যারে হতে হবে এবং সামগ্রীর প্রকারটি অবশ্যই অ্যাপ্লিকেশন / জসন হতে হবে।

— স্টিজন ভ্যান বেল

২.১ কী জসন ব্যবহার করতে পারে যা কেবল একটি স্ট্রিং অ্যারে নয়? ব্যবহারকারীর কাছে আমার এত মূল্যবান হওয়া দরকার এবং আরও প্রক্রিয়াকরণ করতে আইডি ব্যবহার করতে হবে। পছন্দসই কাঁটাচামড়া ছাড়াই কী সম্ভব?

— আন্তন

@ স্টিজিন এখানে কোনও বেনামে ফাংশন কীভাবে ব্যবহৃত হবে, কোনও প্রদর্শিত বিকল্পের জন্য একটি আইডি প্রক্রিয়া করতে পারে তার কোনও উদাহরণ রয়েছে? ধন্যবাদ!

— Acyra

আমি উল্লেখ করতে চাই যে এই পদ্ধতিটি ব্যবহারের ফলে একটি এজেএক্স বলা হয় যে ইনপুটটিতে প্রতিটি কীস্ট্রোকের জন্য তৈরি হচ্ছে । যদি সার্ভারটি মূলত স্থিতিশীল ডেটা ফেরত চলেছে (অর্থাত্ ক্যোয়ারী সহ সত্যই কিছু করছে না), তবে এটি বেশ অপচয় হতে পারে।

— ডোলোগান

এর getপরিবর্তে কেন ব্যবহার করবেন getJSON? এটি আরও উপযুক্ত বলে মনে হচ্ছে।

— গ্রেগ টায়ার

Answer 2

আপনি বিএস টাইপহেড কাঁটাচামচ ব্যবহার করতে পারেন যা এজ্যাক্স কলগুলিকে সমর্থন করে। তারপরে আপনি লিখতে সক্ষম হবেন:

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

Comments

পোষ্টের তথ্য ফেরতের জন্য jQuery এর "বুদ্ধিমান অনুমান" কাজ করছিল না যখন আমি ফিরে এসেছি, উদাহরণস্বরূপ ["aardvark", "apple"],। আমাকে কলটিতে পরিষ্কারভাবে dataTypeপ্যারামিটার সেট করতে হয়েছিল set $.postদেখুন jQuery.post () ।

— মরিচা ফাউসাক

@rfausak বিকল্পভাবে, সেট Content-typeকরার হেডারapplication/json

— মরিচা Fausak

আমি আনক্যাচড টাইপ এরির পাচ্ছি: অপরিজ্ঞিতের 'টুলওয়ারকেস' পদ্ধতিতে কল করতে পারি না

— কৃষ্ণপ্রসাদ ভার্মা

আপনি যে লিঙ্কটি পাঠিয়েছেন তাতে আমি sourceকার্য সম্পাদন করতে এমনকি ফাংশনটি পাচ্ছি না ।

— জেমস

চমৎকার উত্তর! আমি পরিবর্তে একটি জিইটি অনুরোধ ব্যবহার করব, কেবলমাত্র বিশ্রামের মানগুলি পূরণ করতে।

— মাউরো

Answer 3

বুটস্ট্র্যাপ ২.১.০ থেকে শুরু:

এইচটিএমএল:

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

এখন আপনি আপনার এইচটিএমএল-কোডটিতে "জসন-অনুরোধ" লিঙ্ক স্থাপন করে একটি ইউনিফাইড কোড তৈরি করতে পারেন।

Comments

তবে আমি এটি ব্যবহারে পরিবর্তন করব $(this)[0].$element.data('link')।

— অ্যান্ড্রু এলিস

বাthis.$element.data('link')

— রিচার্ড 87

Answer 4

সমস্ত প্রতিক্রিয়া বুটস্প্র্যাপ 2 টাইপহেডকে বোঝায়, যা আর বুটস্প্র্যাপ 3 তে উপস্থিত নেই।

এখানে যে কেউ অন্যর জন্য নির্দেশিত হয়েছে নতুন পোস্ট-বুটস্ট্র্যাপ টুইটার 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);
      }
    });
  }
});

এই উদাহরণটি সিঙ্ক্রোনাস ( প্রসেসিং-এর জন্য কল ) এবং অ্যাসিঙ্ক্রোনাস পরামর্শ উভয়ই ব্যবহার করে , তাই আপনি কিছু বিকল্প অবিলম্বে উপস্থিত হতে দেখবেন, তারপরে অন্যগুলি যুক্ত করা হবে। আপনি কেবল একটি বা অন্যটি ব্যবহার করতে পারেন।

স্ট্রিংয়ের পরিবর্তে অবজেক্টের সাথে কাজ করা সহ অনেকগুলি বাইন্ডেবল ইভেন্ট এবং কয়েকটি খুব শক্তিশালী বিকল্প রয়েছে, সেক্ষেত্রে আপনি আপনার আইটেমটিকে পাঠ্য হিসাবে রেন্ডার করতে নিজস্ব কাস্টম ডিসপ্লে ফাংশনটি ব্যবহার করবেন ।

Comments

ধন্যবাদ. আরও একটি প্রশ্ন: প্রক্রিয়াআসেন্সির সাথে আমি "টাইপ এরির: পরামর্শ.স্লাইস কোনও ফাংশন নয়" " ফিরে আসা JSON এর মতো দেখতে কেমন লাগবে? এখানে আমার সেরা অনুমান: {: পরামর্শ => ["জিনিস 1", "জিনিস 2", "জিনিস 3"]}

— ব্যবহারকারীর 1515295

নিশ্চিত করুন যে আপনি কোনও বৈধ JSON স্ট্রিং প্রত্যাবর্তন করেছেন। আপনার AJAX পরামর্শ ফাংশনটি স্ট্রিংগুলির একটি অ্যারে যেমন, যেমন ["Thing 1","Thing 2"]কাস্টম ডিসপ্লে ফাংশন সহ আপনার প্রয়োজনীয়তা অনুসারে অবজেক্টগুলির একটি অ্যারে [{"id":1,"label":"Foo"},{"id":2,"label":"Bar"}]

— ফিরিয়ে আনবে

আমি ফিরে আসি [{"id":1,"label":"Foo"},{"id":2,"label":"Bar"}], এখন আমি আইডি এবং লেবেল সহ টাইপহেড ড্রপডাউনতে দুটি কলাম দেখাতে চাই। আমি এটা কিভাবে করবো?

— বিশাল

আমার আল্লাহ !!! আমি গত 3 দিন ধরে অনুসন্ধান করছিলাম কেউ এ সম্পর্কে উল্লেখ করেনি। আমি এখনও অবধি সিঙ্ক ফাংশন দিয়ে পরীক্ষা করছিলাম। ধন্যবাদ দোস্ত!!

— গিলসন পিজে

ধন্যবাদ! বুটস্ট্র্যাপ 4.3, এবং jquery 3.4 দিয়ে দুর্দান্ত কাজ করে। তবে, মাউস যখন এটির উপরে চলে যায় তখন তালিকাবদ্ধ বিকল্পগুলি হাইলাইট হয় না। আমি ভেবেছিলাম এটি নিজেই টাইপহেডের অংশ হওয়ার কথা।

— বিনিতা ভারতী

Answer 5

আমি এজাক্স দক্ষতার সাথে মূল টাইপহেড বুটস্ট্র্যাপ প্লাগইনকে বাড়িয়েছি। ব্যবহার করা খুব সহজ:

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

এখানে গিথুব রেপো: অ্যাজাক্স-টাইপহেড

Comments

আমি গুডবারুর কোড দেখেছি; খোলামেলাভাবে, আমি এটিকে সবচেয়ে পছন্দ করেছি। এটি কিছুটা বন্ধুত্বপূর্ণ এবং আরও কার্যকারিতা সরবরাহ করে। ভাল কাজ পল! কেবলমাত্র আমি যা পরামর্শ দিচ্ছি তা হল আপনার README ব্যবহারকারীকে মনে করিয়ে দেবে যে আপনার কোডটি সঠিকভাবে ব্যবহার করতে সক্ষম হওয়ার জন্য তাদের তাদের JSON-ডেটা JS এ পার্স করতে হবে। আমি ধরে নিয়েছিলাম আপনি এটি আমার জন্য পার্স করছেন যাতে আমাকে কিছুটা ঝুলিয়ে রাখে। অন্যথায়, বেশ সুন্দর, আপনাকে ধন্যবাদ! :)

— বেন

আপনার সার্ভার একটি JSON অবজেক্টের পরিবর্তে একটি স্ট্রিং প্রদান করে। jQuery এর aj .জ্যাক্স () কলটি করতে ব্যবহৃত হয় এবং এটি পার্সিংয়ের যত্ন নেয়।

— পল ওয়ারেলিস

একেবারে সঠিক, ধরার জন্য আপনাকে ধন্যবাদ! :) এই প্লাগইনটি খুব ভাল কাজ করে।

— বেন

হ্যালো, সার্ভারের দিকটি কেমন হওয়া উচিত JSON? আমি হচ্ছি Uncaught TypeError: Cannot read property 'length' of undefined । আমি json_encode($array)ডান শিরোনাম ব্যবহার করছি এবং প্রেরণ করছি ( 'Content-Type: application/json; charset=utf-8')। jquery সংস্করণjQuery v1.9.1

— Kyslik

Answer 6

আমি 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")`

এবং নিম্নলিখিত সিএসএস যুক্ত করুন

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

নিখুঁত কাজ করে।

Comments

আপনি jquery ui মিনিটের কোন সংস্করণ ব্যবহার করছেন?

— পান্নাজভা

আপনার যদি jQuery 1.7.1 এবং jQuery UI 1.8.16 এর জন্য এটির প্রয়োজন হয় তবে আমি উপরের ফিক্সের উপর ভিত্তি করে একটি জিআইএসটি তৈরি করেছি যা দেখায় jQuery UI ফাইলটি কোথায় পরিবর্তন করতে হবে। gist.github.com/1884819 - লাইনগুলি // সংশোধিত

— রিচার্ড হোলিস

এটি একটি সুন্দর পুরানো প্রশ্ন / উত্তর তবে আমি কেবল এটিই বলতে চাই যে ২ য় পক্ষের উপাদানগুলির কোডটি পরিবর্তন করা সবসময় খারাপ অভ্যাস। প্রতিবার আপনি যখন এগুলি আপগ্রেড করেন তখন আপনাকে সমস্ত পরিবর্তনগুলি আবার দেখতে হবে। এই বিশেষ ক্ষেত্রে, jQuery উইজেটগুলি উত্তরাধিকার সূত্রে প্রাপ্ত হতে পারে যা সেগুলি কাস্টমাইজ করার অনেক বেশি নিরাপদ উপায়। সুতরাং মূলত, আপনার নিজস্ব উইজেট তৈরি করুন, মূলটি থেকে উত্তরাধিকারী করুন (এই ক্ষেত্রে স্বতঃপূরণ) এবং আপনার কল্পনা প্রকাশ করুন! :)

— অ্যালেক্সকোড

Answer 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');
    }
});

Comments

আপনার উত্তরের কিছু ব্যাখ্যা যোগ করতে পারলে ভালো লাগবে। উদাহরণস্বরূপ, ইতিমধ্যে বিদ্যমান উত্তরের মধ্যে উপস্থাপিত সমাধানগুলির তুলনায় আপনার সমাধানের পার্থক্য কী?

— হংক

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

Answer 9

যারা স্বীকৃত উত্তরের একটি কফিসিপি সংস্করণ খুঁজছেন তাদের জন্য:

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

Answer 10

আমি এই পোস্টটি দিয়ে গিয়েছিলাম এবং সবকিছু সঠিকভাবে কাজ করতে চায় নি এবং শেষ পর্যন্ত কয়েকটি উত্তর থেকে বিটগুলি একসাথে পিস করেছিলাম তাই আমার 100% কার্যকারী ডেমো রয়েছে এবং রেফারেন্সের জন্য এটি এখানে আটকানো হবে - এটি একটি পিএইচপি ফাইলে পেস্ট করুন এবং নিশ্চিত করুন যে এতে অন্তর্ভুক্ত রয়েছে যথাস্থান.

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

Answer 11

আপনার পরিষেবাটি সঠিক অ্যাপ্লিকেশন / জসন সামগ্রীর ধরণের শিরোনাম না ফিরিয়ে দিলে এটি চেষ্টা করুন:

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

Answer 12

আপডেট: আমি এই কাঁটাচামচ ব্যবহার করে আমার কোড পরিবর্তন করেছি

টমিস্লাভ মার্কোভস্কির পরামর্শ অনুসারে আমি ea .এইচ ব্যবহার করার পরিবর্তে আমি $। ম্যাপে পরিবর্তিত হয়েছি

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

    }
});

তবে আমি পেয়ে কিছু সমস্যার মুখোমুখি হচ্ছি

আনচাড টাইপ এরির: অপরিজ্ঞাত পদ্ধতিতে 'টুলওয়ারকেস' কল করতে পারবেন না

যেমনটি আপনি একটি নতুন পোস্টে দেখতে পাচ্ছেন আমি এখানে বের করার চেষ্টা করছি

আশা করি এই আপডেটটি আপনার কোনও কাজে আসবে ...

Comments

ওপির সাথে সম্পর্কিত নয়: আমি এর Array.mapপরিবর্তে $.eachআপনার সম্পূর্ণ successকলব্যাক ফাংশনের সামগ্রীটি ব্যবহার করে প্রতিস্থাপন করবvar manufacturers = results.data.manufacturers.map(function (item) { return { id: item.Manufacturer.id, manufacturer: item.Manufacturer.manufacturer } });

— টমিসালভ মার্কভস্কি

আপনাকে ধন্যবাদ টমিসলাভ মার্কোভস্কি আপনার পরামর্শ অনুসারে আমি আমার কোডটি পরিবর্তন করেছি।

— মিমোস্কোসা

Answer 13

আপনার কাছে আমার কাছে কার্যকারী উদাহরণ নেই এবং আমার কাছে খুব পরিষ্কার সমাধান নেই, তবে আমি যা খুঁজে পেয়েছি তা আপনাকে বলি।

আপনি যদি টাইপএহেডের জাভাস্ক্রিপ্ট কোডটি দেখেন তবে এটির মতো দেখাচ্ছে:

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

এই কোডটি সোর্স অ্যারেতে একটি উপাদান মেলে jQuery "গ্রেপ" পদ্ধতি ব্যবহার করে। আপনি কোনও এজ্যাক্স কল করতে পারবেন এমন কোনও স্থান আমি দেখিনি, সুতরাং এর কোনও "পরিষ্কার" সমাধান নেই।

তবে, আপনি এটি করতে পারেন এমন কিছুটা হ্যাকি উপায় হ'ল গ্রিপ পদ্ধতিটি jQuery এ যেভাবে কাজ করে তা কাজে লাগানো। গ্রেপের প্রথম আর্গুমেন্ট হ'ল সোর্স অ্যারে এবং দ্বিতীয় আর্গুমেন্টটি এমন একটি ফাংশন যা উত্স অ্যারের সাথে মেলে ব্যবহার করা হয় (লক্ষ্য করুন বুটস্ট্র্যাপ যখন আপনি এটি শুরু করার সময় আপনি সরবরাহ করেছিলেন "ম্যাচার" বলে)। আপনি যা করতে পারতেন তা হ'ল উত্সাহটি একটি ডামি ওয়ান-এলিমেন্ট অ্যারেতে সেট করুন এবং ম্যাচারটিকে একটি এজ্যাক্স কল সহ একটি ফাংশন হিসাবে সংজ্ঞায়িত করুন। এইভাবে, এটি ঠিক একবারে AJAX কলটি চালাবে (যেহেতু আপনার উত্স অ্যারেতে এটিতে কেবল একটি উপাদান রয়েছে)।

এই সমাধানটি কেবল হ্যাকি নয়, তবে এটি কার্য সম্পাদন সংক্রান্ত সমস্যায় ভুগবে যেহেতু টাইপএইড কোডটি প্রতিটি কী প্রেসে দেখার জন্য ডিজাইন করা হয়েছে (এজ্যাক্স কলগুলি কেবলমাত্র কয়েকটি কিস্ট্রোক বা নির্দিষ্ট সময়ের পরে নিষ্ক্রিয় সময়ের মধ্যে হওয়া উচিত)। আমার পরামর্শটি চেষ্টা করে দেখুন, তবে অন্য একটি স্বতঃপূর্ন লাইব্রেরির সাথে আটকে থাকুন বা আপনি যদি কোনও সমস্যার মুখোমুখি হন তবে এটি কেবল অ-এজ্যাক্স পরিস্থিতিতে ব্যবহার করুন।

Answer 14

এজাক্স ব্যবহার করার সময়, ফলাফলগুলির সঠিক প্রদর্শনটিতে আপনার সমস্যা আছে কিনা $.getJSON()তার পরিবর্তে চেষ্টা করুন $.get()।

আমার ক্ষেত্রে আমি ব্যবহারের সময় প্রতিটি ফলাফলের প্রথম চরিত্রটি পেয়েছিলাম $.get(), যদিও আমি json_encode()সার্ভার-সাইড ব্যবহার করেছি ।

Answer 15

আমি এটি $().one() সমাধান করার জন্য ব্যবহার করি ; পৃষ্ঠাটি লোড হয়ে গেলে, আমি সার্ভারে এজাক্স প্রেরণ করি এবং অপেক্ষা করার জন্য অপেক্ষা করি। তারপরে ফলটি ফাংশনে পাস করুন। $().one()গুরুত্বপূর্ণ। কারণ একসময় ইনপুটতে সংযুক্ত করতে টাইপহেড.জেস চাপুন । খারাপ লেখার জন্য দুঃখিত

(($) => {
    
    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 ?">

Answer 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();

?>