Home/ Questions/Q 6139557
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T18:00:19+00:00

Im currently using the JQuery UI extension for its search autocomplete. However, I need

  • 0

Im currently using the JQuery UI extension for its search autocomplete. However, I need to be able to limit the list of matches to 10. Furthermore, I also need to have a button on the bottom that will bring up the next 10 (hypothetical) matches. So far I have this as my code:

<script>
    $(document).ready(function() {
        var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";

        $('input#autocomplete').autocomplete({
            source: ['johannesburg z', 'johannesburg x', 'johannesburg v','johannesburg b','johannesburg a','johannesburg q', 'johannesburg u', 'johannesburg y', 'johannesburg o', 'johannesburg p'],
            minLength: 3,
            open: function(e,ui) {

                var
                    acData = $(this).data('autocomplete'),
                    styledTerm = termTemplate.replace('%s', acData.term);

                acData
                    .menu
                    .element
                    .find('a')
                    .each(function() {
                        var me = $(this);
                        me.html( me.text().replace(acData.term, styledTerm) );
                    });

            }
        });
    });  
</script>

and the HTML

<body>
    <input id="autocomplete" />
    <input type="button" class="hello" />
</body

Iv already checked for similar solutions, but nothing seems to be working.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would handle most of this server side.

    For example, have your server limit results to 10, and then output this via JSON to the client.

    With regards to a button that scrolls to the next list of results, you will need to implement something that emulates a form of pagination. The autocomplete dropdown should maintain an offset for results. Initially, the limit is obviously ten, and the offset is 0 (start of the results, depending how you ordered it on output). The button will need to request more results from the server when clicked, and ultimately pass in another GET variable (as well as term) that will represent the offset of results.

    How you implement this is up to you, and I haven’t done this before so I can’t just give you example code, but jQuery UI provides enough framework for you to get this done and based on my methodology above, it shouldn’t be too difficult.

    • 0