I use the Select2 plugin to search for data on the JSON file returned via PHP. The problem is that matching tags are not searched and sorted. Stupidly displays all the values ​​as you type something in input. Help to understand the settings)

$(".search select").select2({ ajax: { url: "/index.php/search/jsonTags?type=1", dataType: 'json', delay: 250, async: false, cache: false, data: function(params) { return { query: params.term, page: params.page }; }, processResults: function(data, params) { var items = $.map(data, function(item, i, params) { return { text: '#' + item.tag, slug: item.tag, id: item.tag }; }); return {results: items}; } }, minimumInputLength: 3, placeholder: "Π’Π²Π΅Π΄ΠΈΡ‚Π΅ Ρ…Π΅Ρˆ Ρ‚Π΅Π³", language: "ru", templateResult: function (data) { if (data.id === '') { // adjust for custom placeholder values return 'Custom styled placeholder text'; } var term = $('.select2-search__field').val(); var $text = $('<span>'+data.text.replace(term, '<strong>'+term+'</strong>')+'</span>'); return $text; } });

and the data in JSON is as follows:

 [ { "tag": "Ρ†ΠΈΡ€ΠΊΠΎΠ½" }, { "tag": "ΡΠ΅Ρ€ΡŒΠ³ΠΈ" }, { "tag": "ΠΊΠΎΠ»ΡŒΡ†ΠΎ" }, { "tag": "крСст" }, { "tag": "ΠΎΠ±Ρ€.ΠΊΠΎΠ»ΡŒΡ†ΠΎ" }, { "tag": "пирсингвнос" }, { "tag": "кольС" }, { "tag": "подвСс" }, { "tag": "пирсинг" }, { "tag": "ΠΊΠΎΠ»ΡŒΡ†ΠΎΠΏΠΎΠΌΠΎΠ»Π²ΠΎΡ‡Π½ΠΎΠ΅" }, { "tag": "ΠΈΠΊΠΎΠ½Π°" }, { "tag": "ΡΠ΅Ρ€ΡŒΠ³Π°-ΠΊΠ°Ρ„Ρ„" }, { "tag": "браслСт" }, { "tag": "ΠΏΠ΅Ρ‡Π°Ρ‚ΠΊΠ°" }, { "tag": "ΡΠ΅Ρ€ΡŒΠ³ΠΈ-пусСты" }, { "tag": "пирсинг_Π²_нос" }, { "tag": "Π·Π²Π΅Π·Π΄Π°" }, { "tag": "ΡΠ΅Ρ€ΡŒΠ³ΠΈ-ΠΏΡ€ΠΎΠ΄Π΅Π²ΠΊΠΈ" }, { "tag": "Π±Ρ€ΠΎΡˆΡŒ" }, { "tag": "сувСнир" }, { "tag": "слСйв-браслСт" }, { "tag": "ΡˆΠ½ΡƒΡ€ΠΎΠΊ" }, { "tag": "мСдальон" }, { "tag": "подвСски_Π½Π°_с/Π·" }, { "tag": "Π·Π½Π°Ρ‡ΠΎΠΊ" }, { "tag": "Π»ΠΎΠΆΠΊΠ°_дСтская" }, { "tag": "ΡΠ΅Ρ€ΡŒΠ³ΠΈ_дСтскиС" }, { "tag": "Π·Π°ΠΏΠΎΠ½ΠΊΠΈ" }, { "tag": "Π·Π°ΠΆΠΈΠΌ" }, { "tag": "ΡˆΠ°Ρ€ΠΌ" }, { "tag": "Ρ†Π΅ΠΏΡŒ" }, { "tag": "ΡΠ΅Ρ€ΡŒΠ³ΠΈ-ΠΊΠΎΠ½Π³ΠΎ" }, { "tag": "ΠΊΠΎΠ»ΡŒΡ†ΠΎ_ΠΏΠΎΠΌΠΎΠ»Π²ΠΎΡ‡Π½ΠΎΠ΅" }, { "tag": "ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚" }, { "tag": "ΠΏΠΎΠ³Ρ€Π΅ΠΌΡƒΡˆΠΊΠ°" }, { "tag": "ΠΌΠΎΡ‰Π΅Π²ΠΈΠΊ" }, { "tag": "Ρ‡Π΅Ρ‚ΠΊΠΈ" }, { "tag": "напСрст_ΠΌΠΎΠ»ΠΈΡ‚Π²Π°" }, { "tag": "Π»ΠΎΠΆΠΊΠ°_чайная" }, { "tag": "Π²ΠΈΠ»ΠΊΠ°_дСсСртная" }, { "tag": "Π»ΠΎΠΆΠΊΠ°_дСсСртная" }, { "tag": "ситСчко" }, { "tag": "Π»ΠΎΠΆΠΊΠ°_кофСйная" }, { "tag": "Ρ€ΡŽΠΌΠΊΠ°" }, { "tag": "Π±Ρ€.для_ΠΎΡ‡ΠΈΡ‰.Π²ΠΎΠ΄Ρ‹" }, { "tag": "Π·Π°ΠΆΠΈΠΌ_для_Π΄Π΅Π½Π΅Π³" }, { "tag": "Π±Ρ€Π΅Π»ΠΎΠΊ" }, { "tag": "Π±Ρ€ΠΎΡˆΡŒ-ΠΊΡƒΠ»ΠΎΠ½" }, { "tag": "Ρ‡Π°ΡˆΠΊΠ°_кофСйная" }, { "tag": "Ρ‡Π°ΡˆΠΊΠ°" }, { "tag": "Π½Π°ΠΊΠ».Π½Π°_ΠΏΡƒΠ³ΠΎΠ²ΠΈΡ†Ρ‹" }, { "tag": "ΡΠ΅Ρ€ΡŒΠ³Π°-пусСта" }, { "tag": "часы_муТскиС" } ]

A lot of them) Why minus it?) Would help to better understand the plugin ....

  • I use this plugin in asp.net-mvc , you have this method /index.php/search/jsonTags?type=1 , accepts the query parameter? - Bald
  • Accepts the type parameter from 0 to 4. For example - pwnz22
  • one
    This method of yours should additionally accept a string (this is what the user will enter in the appropriate field), and on the basis of this string return a filtered list of tags, i.e. the user entered, the server processed the source list, and returned those drains that satisfy the condition - Bald
  • Can you give an example? - pwnz22
  • one
    yes it is the client enters the text in the field, and the server based on this input returns a list of tags - Bald

2 answers 2

Based on the clarifying comments on the original question, you have a problem that you return an unfiltered list of tags .

In order to display in the drop-down list the tags corresponding to the condition entered by the user must

  1. Modify the /index.php/search/jsonTags method on the server which returns a list of tags : add the query parameter a type string that will contain user input;

  2. In the body of the jsonTags method, filter the source data: for example, select * from tags where tag like {здСсь условия ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ} ;

  3. The resulting array of tags is converted to json and given to the client.

    So pre-process the array of objects - remove duplicates, following the example of this solution .

     var thing = [{ "tag": "Ρ†ΠΈΡ€ΠΊΠΎΠ½" }, { "tag": "ΡΠ΅Ρ€ΡŒΠ³ΠΈ" }, { "tag": "Ρ†ΠΈΡ€ΠΊΠΎΠ½" }, { "tag": "крСст" }, { "tag": "крСст" }, { "tag": "крСст" }]; var arr = {}; for (var i = 0, len = thing.length; i < len; i++) arr[thing[i]['tag']] = thing[i]; thing = new Array(); for (var key in arr) thing.push(arr[key]); console.log(thing); document.getElementById('divT').innerHTML = JSON.stringify(thing); 
     <div id="divT"></div>

    • So there are no duplicates there) I filter them through PHP and then transfer them to JSON - pwnz22
    • @ pwnz22 then what are the matching tags? - Jean-Claude
    • i.gyazo.com/dbdd35da9ffbd2d6900dc2a3bc830d34.png - I enter the first letters of the tag name answers should be filtered and stand out in bold (but I didn’t do something in JS ( - pwnz22
    • @ pwnz22 so remove the lattice character and will be filtered and highlighted. - Jean-Claude
    • Strange, but when I remove the grid, when I enter the results, it does not give out results at all (a Cannot read property 'replace' of null error appears in the console - pwnz22