JQuery UI স্বয়ংক্রিয়রূপে কোনও ফলাফল সনাক্ত করা

Question 1

আপনি আমাকে তাদের দিকে ইঙ্গিত করার আগে হ্যাঁ, আমি এই বিষয়ে অর্ধ ডজন পোস্ট পর্যালোচনা করেছি, তবে কেন এটি কার্যকর হয় না তা নিয়ে আমি এখনও স্তিমিত।

আমার লক্ষ্যটি স্বতঃসম্পূর্ণ যখন 0 টি ফলাফল দেয় তা সনাক্ত করা। কোডটি এখানে:

 $.ajax({
   url:'sample_list.foo2',
   type: 'get',
   success: function(data, textStatus, XMLHttpRequest) {
      var suggestions=data.split(",");

  $("#entitySearch").autocomplete({ 
    source: suggestions,
    minLength: 3,
    select: function(e, ui) {  
     entityAdd(ui.item.value);
     },
    open: function(e, ui) { 
     console.log($(".ui-autocomplete li").size());
     },
    search: function(e,ui) {
     console.log("search returned: " + $(".ui-autocomplete li").size());

    },
    close: function(e,ui) {  
     console.log("on close" +  $(".ui-autocomplete li").size());    
     $("#entitySearch").val("");
    }
   }); 

  $("#entitySearch").autocomplete("result", function(event, data) {

   if (!data) { alert('nothing found!'); }

  })
 }
});

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

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

Question 2

jQueryUI 1.9

jQueryUI 1.9 responseইভেন্টটি স্বতঃসম্পূর্ণ উইজেটকে আশীর্বাদ করেছে , যা কোনও ফলাফল ফিরে না পেয়ে তা সনাক্ত করার জন্য আমরা উত্তোলন করতে পারি:

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

সুতরাং, এটি মনে রেখে, jQueryUI 1.8 এ আমাদের যে হ্যাকিং করতে হয়েছিল তা প্রতিস্থাপন করা হয়েছে:

$(function() {
    $("input").autocomplete({
        source: /* */,
        response: function(event, ui) {
            // ui.content is the array that's about to be sent to the response callback.
            if (ui.content.length === 0) {
                $("#empty-message").text("No results found");
            } else {
                $("#empty-message").empty();
            }
        }
    });
});

উদাহরণ: http://jsfiddle.net/andrew whitaker / x5q6Q/

jQueryUI 1.8

আমি jQueryUI API এর সাথে এটি করার সহজ সরল কোনও উপায় খুঁজে পাইনি, তবে আপনি autocomplete._responseনিজের সাথে ফাংশনটি প্রতিস্থাপন করতে পারেন এবং তারপরে ডিফল্ট jQueryUI ফাংশনটি ( স্বতঃসম্পূর্ণ prototypeবস্তুর প্রসারিত করার জন্য আপডেট করা ) কল করতে পারেন :

var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
    __response.apply(this, [content]);
    this.element.trigger("autocompletesearchcomplete", [content]);
};

এবং তারপরে ইভেন্টের একটি ইভেন্ট হ্যান্ডলারকে আবদ্ধ করুন autocompletesearchcomplete(বিষয়বস্তু অনুসন্ধানের ফলাফল, একটি অ্যারে):

$("input").bind("autocompletesearchcomplete", function(event, contents) {
    $("#results").html(contents.length);
});

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

এখানে একটি কার্যকারী উদাহরণ : http://jsfiddle.net/andrew whitaker / VEhyV/

আমার উদাহরণটি ডেটা উত্স হিসাবে স্থানীয় অ্যারে ব্যবহার করে, তবে আমি মনে করি না এটির বিষয়টি বিবেচিত হওয়া উচিত।

আপডেট: আপনি নিজের উইজেটে নতুন কার্যকারিতাটিও গুটিয়ে রাখতে পারেন, ডিফল্ট স্বতঃপূরণ কার্যকারিতা প্রসারিত করে:

$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {

  _response: function(contents){
      $.ui.autocomplete.prototype._response.apply(this, arguments);
      $(this.element).trigger("autocompletesearchcomplete", [contents]);
  }
}));

থেকে আপনার কল পরিবর্তন করা হচ্ছে .autocomplete({...});:

$("input").customautocomplete({..});

এবং পরে কাস্টম autocompletesearchcompleteইভেন্টে আবদ্ধ হন :

$("input").bind("autocompletesearchcomplete", function(event, contents) {
    $("#results").html(contents.length);
});

এখানে একটি উদাহরণ দেখুন : http://jsfiddle.net/andrew whitaker / VBTGJ/

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

var src = [...];

$("#auto").autocomplete({
    source: function (request, response) {
        var results = $.ui.autocomplete.filter(src, request.term);

        if (!results.length) {
            $("#no-results").text("No results found!");
        } else {
            $("#no-results").empty();
        }

        response(results);
    }
});

এর মধ্যেই ifযেখানে কোনও ফলাফল সনাক্ত না হলে আপনি কার্যকর করার জন্য আপনার কাস্টম যুক্তি স্থাপন করবেন।

উদাহরণ: http://jsfiddle.net/qz29K/

আপনি যদি রিমোট ডেটা উত্স ব্যবহার করে থাকেন তবে এর মতো কিছু বলুন:

$("#auto").autocomplete({
    source: "my_remote_src"
});

তারপরে আপনাকে আপনার কোডটি পরিবর্তন করতে হবে যাতে আপনি AJAX কে নিজেকে কল করতে পারেন এবং 0 টি ফলাফল কখন ফিরে আসে তা সনাক্ত করতে পারেন:

$("#auto").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "my_remote_src", 
            data: request,
            success: function (data) {
                response(data);
                if (data.length === 0) {
                    // Do logic for empty result.
                }
            },
            error: function () {
                response([]);
            }
        });
    }
});

Question 3

প্রত্যেকে সহজ, অন্তর্নির্মিত উপায়ে উপেক্ষা করছে বলে মনে হচ্ছে: বার্তাগুলি ব্যবহার করুন: নো ফলাফল ফলাফল

$('#field_name').autocomplete({
  source: $('#field_name').data('autocomplete-source'),
  messages: {
    noResults: function(count) {
      console.log("There were no matches.")
    },
    results: function(count) {
      console.log("There were " + count + " matches")
    }
  }
})

এই বৈশিষ্ট্যটি পরীক্ষামূলক বৈশিষ্ট্য হিসাবে ( এখানে বর্ণিত ) jQuery 1.9 এ যুক্ত করা হয়েছিল । জুলাই 2017 হিসাবে, এটি এখনও এপিআই তে নথিভুক্ত করা হয়নি ।

Question 4

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

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

if (preg_match("/^[a-zA-Z0-9_]*$/", $_GET['callback'])) {//sanitize callback name
    $callback = $_GET['callback'];
} else { die(); }

die($callback . "([])");

অন্য উপায়টি হ'ল সার্ভারের প্রতিক্রিয়াতে একটি পতাকা ফিরিয়ে আনা হবে যা নির্দেশ করে যে কোনও মিল নেই and এক্ষেত্রে সার্ভারের প্রতিক্রিয়া এমন কিছু হবে:

die($callback . "([{'nodata':true}])");

তারপরে এই পতাকাটির ভিত্তিতে ক্রিয়াগুলি ক্লায়েন্টের পক্ষ থেকে সম্পাদন করা যেতে পারে:

$.getJSON('response.php?callback=?', request, function (response) {
    if (typeof response[0].nodata !== 'undefined' && response[0].nodata === true) {
        alert('No data to display!');
    } else {
        //Do whatever needs to be done in the event that there is actually data to display.
    }
});

Question 5

আপনার স্ব-পরিপূর্ণ উপাদানটি আরম্ভ করার পরে, আপনি বার্তার ইঙ্গিতের জন্য ডিফল্ট স্প্যান ব্যবহার করতে চাইলে বার্তাগুলির বিকল্পটি সেট করুন:

$(<yourselector>).autocomplete('option', 'messages', {
    noResults: 'myKewlMessage',
    results: function( amount ) {
        return amount + ( amount > 1 ? " results were" : " result was" ) + " found.";
    }
});

দ্রষ্টব্য : এটি একটি পরীক্ষামূলক এপিআই (নথিভুক্ত নয়)। jQuery ইউআই বিকাশকারীরা স্ট্রিং ম্যানিপুলেশন এবং আন্তর্জাতিকীকরণের জন্য এখনও একটি সম্পূর্ণ সমাধান অনুসন্ধান করছে।

Question 6

ঘন্টা বাজানোর পরে অবশেষে আমি No match foundjQuery স্বতঃপূরণে প্রদর্শন করার জন্য একটি কৌশল পেয়েছি । উপরের কোডটি দেখুন এবং কেবল divআমার ক্ষেত্রে #ulNoMatchএবং এর শৈলীতে সেট করুন displap:none। কলব্যাক সাফল্যের পদ্ধতিতে অ্যারেরটি ফিরে এসেছে কিনা তা পরীক্ষা করে দেখুন length == 0। যদি সেখানে থাকে তবে আপনি নিজের দিনটি তৈরি করেছেন! :)

<pre><div class="ui-widget1" style="width: auto;">
    <asp:TextBox ID="txtSearch" class="tb" runat="server" Width="150px">
    </asp:TextBox>
    <ul id="ulNoMatch" class="ui-autocomplete ui-menu ui-widget1 ui-widget1-content ui-corner-all"
        role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 16;
        display: none; width: 150px;">
        <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">No Matches
            Found</a></li>
    </ul>
    </div><pre>
<b>
<b>

Enter code here

<script>
    $(function () {
        $("input[id$='txtSearch']").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "splah.aspx/GetByName",
                    data: "{ 'strName': '" + request.term.trim() + "' }",
                    dataType: "json",
                    type: "POST",
                    //cacheLength: 1,
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) {
                        return data; },
                    success: function (data) {
                        var found = $.map(data.d, function (item) {
                            return {
                                value: item.Name,
                                id: item.id
                            }
                         });

                         if (found.length == 0)
                         {
                             $("#ulNoMatch").show();
                         }
                         else
                         {
                             $("#ulNoMatch").hide();
                         }
                         response(found);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            select: function (event, ui) {
                $("input[id$='txtSearch']").val(ui.item.label);
                $("input[id$='txtID']").val(ui.item.id);
                return false;
            },
            minLength: 1
        });
    });
</script>

Question 7

The easiest straight forward way to do it.

$("#search-box").autocomplete({
                    minLength: 2,
                    source:function (request, response) {
                        $.ajax({
                            url: urlPref + "/Api/SearchItems",
                            data: {
                                term: request.term
                            },
                            success: function (data) {
                                if (data.length == 0) {
                                    data.push({
                                        Id: 0,
                                        Title: "No results found"
                                    });
                                }
                                response(data);
                            }
                            });
                        },

Question 8

sourceকাস্টম কলব্যাক সহ প্যারামিটার কেন পর্যাপ্ত নয় তা আমি দেখতে পাচ্ছি না :

$("#autocomplete").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://example.com/service.json",
            data: {
                q: this.term
            },
            success: function (data, textStatus, jqXHR) {
                // data would be an array containing 0 or more items
                console.log("[SUCCESS] search returned " + data.length + " item(s)");
                response(data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // triggered when AJAX failed because of, for example, malformed JSON
                console.log("[FAILURE] search returned error");
                response([]);
            }
        });
    }
});

Question 9

function SearchText() {
 $(".autosuggest").autocomplete({
   source: function (request, response) {
    $.ajax({
     type: "POST",
     contentType: "application/json; charset=utf-8",
      url: "Default.aspx/GetAutoCompleteData",
      data: "{'username':'" + document.getElementById('txtSearch').value + "'}",
        dataType: "json",
        success: function (data.d) {
        if ((data.d).length == 0) {
         alert("no result found");
          }
           response(data.d);
         },
         error: function (result) {
              alert("Error");
         }
         });
        }
     });
  }