[jQuery UI] AutocompleteのソースをAjaxで取得する

jQuery UIの公式サイトにあるAutocompleteのデモ。

Autocomplete | jQuery UI
http://jqueryui.com/autocomplete/

<script>
$(function() {
    var availableTags = [
      "ActionScript", "AppleScript", "Asp", "BASIC", "C",
      "C++", "Clojure", "COBOL", "ColdFusion", "Erlang",
      "Fortran", "Groovy", "Haskell", "Java", "JavaScript",
      "Lisp", "Perl", "PHP", "Python", "Ruby",
      "Scala", "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
});
</script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

ニーズがあったので、sourceをajaxでサーバーから取得するように書き直してみた。

<script>
    $(function() {
       $("#tags").autocomplete({
          source: function(request, response) {
              $.ajax({
                 url: "autocomplete-src.php",
                 dataType: "json",
                 type: "POST",
                 cache: false,
                 data: { param1: request.term },
                 success: function(data) {
                     response(data);
                 },
                 error: function(XMLHttpRequest, textStatus, errorThrown) {
                     response(['']);
                 }
              });
          } 
       });
    });
</script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

サーバー側のコードは以下。

<?php //autocomplete-src.php

$availableTags = array(
    "ActionScript", "AppleScript", "Asp", "BASIC", "C",
    "C++", "Clojure", "COBOL", "ColdFusion", "Erlang",
    "Fortran", "Groovy", "Haskell", "Java", "JavaScript",
    "Lisp", "Perl", "PHP", "Python", "Ruby",
    "Scala", "Scheme"
);

if ($_POST['param1']) {
    $tags = array();
    foreach ($availableTags as $tag) {
        //if (strpos($tag, $_POST['param1']) === 0) {    //大小文字区別する
        if (stripos($tag, $_POST['param1']) === 0) {    //大小文字区別しない
            $tags[] = $tag;
        }
    }
    echo json_encode($tags);
} else {
    echo json_encode(array());
}

?>