[BUG] documentation: demo on autocomplete fails for remote source

[ieperlingetje]

On the documentation site for jquery UI , the autcomplete demo's fail if there are remote sources involved (see for example: https://jqueryui.com/autocomplete/#remote). This is because the php script that is used for the demo (see: https://jqueryui.com/resources/demos/autocomplete/search.php?term=test) is not being executed but instead send to the browser. I don't see any sensitive info in the php file, so doesn't look like a security issue.

[abegit]

Just encountered the same issue, and the console log knows the response is invalid also.

Throws the error
Uncaught SyntaxError: Unexpected token '<'

To recreate the issue, go to this page:
https://jqueryui.com/autocomplete/#remote-jsonp

Type 'co' (without quotes) in the Demo Search:
and view the DevTools Console.

VM300:1 Uncaught SyntaxError: Unexpected token '<'
    at DOMEval (jquery-3.6.0.js:133:12)
    at Function.globalEval (jquery-3.6.0.js:376:3)
    at text script (jquery-3.6.0.js:10149:11)
    at ajaxConvert (jquery-3.6.0.js:9268:19)
    at done (jquery-3.6.0.js:9746:15)
    at XMLHttpRequest.<anonymous> (jquery-3.6.0.js:10057:9)
DOMEval @ jquery-3.6.0.js:133
globalEval @ jquery-3.6.0.js:376
text script @ jquery-3.6.0.js:10149
ajaxConvert @ jquery-3.6.0.js:9268
done @ jquery-3.6.0.js:9746
(anonymous) @ jquery-3.6.0.js:10057
load (async)
send @ jquery-3.6.0.js:10076
ajax @ jquery-3.6.0.js:9690
source @ remote-jsonp.html:25
_search @ jquery-ui.js:6092
(anonymous) @ jquery-ui.js:143
search @ jquery-ui.js:6084
(anonymous) @ jquery-ui.js:143
(anonymous) @ jquery-ui.js:6065
handlerProxy @ jquery-ui.js:661
setTimeout (async)
_delay @ jquery-ui.js:664
_searchTimeout @ jquery-ui.js:6056
(anonymous) @ jquery-ui.js:143
input @ jquery-ui.js:5842
handlerProxy @ jquery-ui.js:626
dispatch @ jquery-3.6.0.js:5430
elemData.handle @ jquery-3.6.0.js:5234

[abegit]

This page on StackOverflow also describes the mismatch between official jQueryUI releases and the demos on the Official jQueryUI's Website.

Follow the thread below
— Abraham

Answer in December 2023 using jQuery 3.7.1 and jQuery UI 1.12.1

$( function() {
    var projects = [
      {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
      }
    ];
 
    $( "#project" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
 
        return false;
      }
    })
    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li>" ).data( "ui-autocomplete-item", item ).append( "<a>" + item.label + "<br>" + item.desc + "</a>" ).appendTo( ul );
        };
  } );

[mgol]

This has been fixed in jQuery UI source; the website will be fixed automatically when jQuery UI 1.13.3 is released.