Brenden Kehren Brenden Kehren - 6 months ago 207
Ajax Question

jQuery UI autocomplete ajax with multiple values

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.

Answer

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>
Comments