I'm using pixabay autoplete (.html)

After some tests, I have managed to change the plain text list of results into a list of links, but even checking that the links are properly printed, these links don't work, and all that happen when one is clicked is show me the data value in the selection field...

Here's the code for my autoplete settings:

$('#search_members').autoComplete({
    minChars: 2,
    delay: 100, 
    source: function(name, response) {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/wp-admin/admin-ajax.php',
            data: 'action=get_listing_names&name='+name,

            success: function(data) {
                response(data);
            }
        });
    },
    renderItem: function (item, search){
        var itemlabel = item.label;
        var itemvalue = item.value;
        var itemurl = item.url;
        search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); //unused
        var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi"); //unused
        return '<div class="autoplete-suggestion" data-val="' + itemvalue + '"><a href="' + itemurl + '">' + itemlabel + '</a></div>';
    },
});

And here a data sample (json object):

[{"value":"215","label":"ARMOR","url":"http:\/\/dev.local\/dashboard\/?sid=215"},{"value":"216","label":"ICOEL","url":"http:\/\/dev.local\/dashboard\/?sid=216"},{"value":"3230","label":"PASSAT","url":"http:\/\/dev.local\/dashboard\/?sid=3230"}]

As I've said, looking through developer tools, the links are perfectly rendered:

<div class="autoplete-suggestions " style="top: 194px; left: 299px; width: 200px; display: none;">
    <div class="autoplete-suggestion" data-val="215">
        <a href="/dashboard/?sid=215">ARMOR</a>
    </div>
    <div class="autoplete-suggestion" data-val="216">
        <a href="/dashboard/?sid=216">ICOEL</a>
    </div>
    <div class="autoplete-suggestion" data-val="3230">
        <a href="/dashboard/?sid=3230">PASSAT</a>
    </div>
</div>

I am not a jquery expert ... What am I doing wrong?

I'm using pixabay autoplete (https://goodies.pixabay./jquery/auto-plete/demo.html)

After some tests, I have managed to change the plain text list of results into a list of links, but even checking that the links are properly printed, these links don't work, and all that happen when one is clicked is show me the data value in the selection field...

Here's the code for my autoplete settings:

$('#search_members').autoComplete({
    minChars: 2,
    delay: 100, 
    source: function(name, response) {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/wp-admin/admin-ajax.php',
            data: 'action=get_listing_names&name='+name,

            success: function(data) {
                response(data);
            }
        });
    },
    renderItem: function (item, search){
        var itemlabel = item.label;
        var itemvalue = item.value;
        var itemurl = item.url;
        search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); //unused
        var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi"); //unused
        return '<div class="autoplete-suggestion" data-val="' + itemvalue + '"><a href="' + itemurl + '">' + itemlabel + '</a></div>';
    },
});

And here a data sample (json object):

[{"value":"215","label":"ARMOR","url":"http:\/\/dev.local\/dashboard\/?sid=215"},{"value":"216","label":"ICOEL","url":"http:\/\/dev.local\/dashboard\/?sid=216"},{"value":"3230","label":"PASSAT","url":"http:\/\/dev.local\/dashboard\/?sid=3230"}]

As I've said, looking through developer tools, the links are perfectly rendered:

<div class="autoplete-suggestions " style="top: 194px; left: 299px; width: 200px; display: none;">
    <div class="autoplete-suggestion" data-val="215">
        <a href="http://dev.local/dashboard/?sid=215">ARMOR</a>
    </div>
    <div class="autoplete-suggestion" data-val="216">
        <a href="http://dev.local/dashboard/?sid=216">ICOEL</a>
    </div>
    <div class="autoplete-suggestion" data-val="3230">
        <a href="http://dev.local/dashboard/?sid=3230">PASSAT</a>
    </div>
</div>

I am not a jquery expert ... What am I doing wrong?

• javascript
• jquery
• json
• autoplete

1 Answer 1

it happened because this library prevent the default action of your links and default action of the event(redirecting to somewhere) will not be triggered. So you can use onSelect function of this library to trigger it manually.

Just replace below code with your code:

    $('#search_members').autoComplete({
    minChars: 2,
    delay: 100, 
    source: function(name, response) {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/wp-admin/admin-ajax.php',
            data: 'action=get_listing_names&name='+name,

            success: function(data) {
                response(data);
            }
        });
    },
    renderItem: function (item, search){
        var itemlabel = item.label;
        var itemvalue = item.value;
        var itemurl = item.url;
        search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); //unused
        var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi"); //unused
        return '<div class="autoplete-suggestion" data-url="' + itemurl + '" data-val="' + itemvalue + '"><a href="' + itemurl + '">' + itemlabel + '</a></div>';
    },
    onSelect: function(e, term, item){
         window.location = item.data('url');
    }
});