jQuery UI autocomplete ajax with multiple values

Question

I've checked several solutions like this:

jQuery UI Autocomplete Multiple Values in Textbox
jQuery UI Autocomplete Multiple Values

with no success. I have a jQuery UI autocomplete working very well with the exception of search phrases with spaces in them. For instance, I'll search "real" and get a list of results but if I enter "real estate" it bombs out after "real ".

Here's my current working code up to adding a space in the textbox:

<script type="text/javascript">        
$(document).ready(function () {           
     /* auto complete for the menu search option */
    $("#txtSearchProgram").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'GET',
                url: '/SpecialPages/Program-Autocomplete.aspx',
                data: { 'searchtext' : encodeURIComponent(request.term), 'langspecific' : '1' },
                dataType: 'json',
                success: function(jsonData) {
                    response(jsonData);
                }
            });
        },
        delay: 0,
        minLength: 2,
        open: function() {
            $(this).autocomplete("widget")
                   .appendTo("#autocomplete-results")
                   .css("position", "static")},
        focus: function( event, ui ) {
          $(this).attr("placeholder", ui.item.label);
          return false;  
        }, 
        select: function (event, ui) {
            event.preventDefault();
            var url = ui.item.value;
            if (url != '#') {
                location.href = url;
            }
        }
    });
});

Here is some code I tried from above links but continue to receive the "Uncaught TypeError: Cannot read property 'autocomplete' of undefined" error

<script type="text/javascript">   
$(document).ready(function () {
     /* auto complete for the menu search option */
    $("#txtSearchProgram").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'GET',
                url: '/SpecialPages/Program-Autocomplete.aspx',
                data: { 'searchtext' : encodeURIComponent(request.term) },
                dataType: 'json',
                success: function(jsonData) {
                    var re = $.ui.autocomplete.escapeRegex(request.term); // errors out here
                    var matcher = new RegExp( "^" + re, "i" );
                    response($.grep(jsonData, function(item){return matcher.test(item.value);}) );
                }
            });
        },
        delay: 0,
        minLength: 2,
        open: function() {
            $(this).autocomplete("widget")
                   .appendTo("#autocomplete-results")
                   .css("position", "static")},
        focus: function( event, ui ) {
          $(this).attr("placeholder", ui.item.label);
          return false;  
        }, 
        select: function (event, ui) {
            event.preventDefault();
            var url = ui.item.value;
            if (url != '#') {
                location.href = url;
            }
        }
    });
});

When I debug it I'm not getting much detail (not a strong front end dev) other than the error I already mentioned.

Not sure @hmd using ".php style" will help anything. As I stated first block of code works except for searching anything with a space in it. — Brenden Kehren
– Brenden Kehren, Commented Apr 22, 2016 at 13:22
So, did you compare the request headers and response of 'with space' and 'without space'? it should be same in your ajax request that you can find at browser's Developers Tool. — hmd
– hmd, Commented Apr 22, 2016 at 14:08
I did not. I often forget those things doing all the backend programming. I'll see if I can't compare and follow up. — Brenden Kehren
– Brenden Kehren, Commented Apr 25, 2016 at 3:06
How does the request and response data look like (in Firebug or Fiddler)? Is it OK, or at which point is the data different than what you would expect? — martinh_kentico
– martinh_kentico, Commented May 12, 2016 at 13:32

Brenden Kehren · Accepted Answer · 2016-05-24 13:01:17Z

After further testing I found the issue was with where I placed and encoded my parameters. The code below is what I started with:

<script type="text/javascript">        
$(document).ready(function () {           
     /* auto complete for the menu search option */
    $("#txtSearchProgram").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'GET',
                url: '/SpecialPages/Program-Autocomplete.aspx',
                data: { 'searchtext' : encodeURIComponent(request.term), 'langspecific' : '1' }, // problem here
                dataType: 'json',
                success: function(jsonData) {
                    response(jsonData);
                }
            });
        },
        delay: 0,
        minLength: 2,
        open: function() {
            $(this).autocomplete("widget")
                   .appendTo("#autocomplete-results")
                   .css("position", "static")},
        focus: function( event, ui ) {
          $(this).attr("placeholder", ui.item.label);
          return false;  
        }, 
        select: function (event, ui) {
            event.preventDefault();
            var url = ui.item.value;
            if (url != '#') {
                location.href = url;
            }
        }
    });
});  

</script>

And this is what I ended up with. Note I removed the data attribute and simply created a query string.

    <script type="text/javascript">        
$(document).ready(function () {           
     /* auto complete for the menu search option */
    $("#txtSearchProgram").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'GET',
                url: '/SpecialPages/Program-Autocomplete.aspx?searchtext=' + encodeURIComponent(request.term) + '&langspecific=1', // resolved
                dataType: 'json',
                success: function(jsonData) {
                    response(jsonData);
                }
            });
        },
        delay: 0,
        minLength: 2,
        open: function() {
            $(this).autocomplete("widget")
                   .appendTo("#autocomplete-results")
                   .css("position", "static")},
        focus: function( event, ui ) {
          $(this).attr("placeholder", ui.item.label);
          return false;  
        }, 
        select: function (event, ui) {
            event.preventDefault();
            var url = ui.item.value;
            if (url != '#') {
                location.href = url;
            }
        }
    });
});  

</script>

Collectives™ on Stack Overflow

jQuery UI autocomplete ajax with multiple values

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related