Filling JQuery autocomplete with PHP array

Question

I'm a relative noob to JavaScript and JQuery, but I've been searching the web for hours to find an answer to this question. I'm trying to populate a JQuery autocomplete function using an array I've made in PHP. This is a snippet of the array:

<?php
    $arr = array(
        "Abaddon" => "/BlinkDaggerSounds/abad_blink_01.mp3",
        "Alchemist" => "/BlinkDaggerSounds/alch_blink_01.mp3",
        "Anti Mage" => "/BlinkDaggerSounds/anti_blink_01.mp3",
        "Ancient Apparition" => "/BlinkDaggerSounds/appa_blink_01.mp3",
        "Axe" => "/BlinkDaggerSounds/axe_blink_01.mp3", 
    );
?>

And here is the script I'm trying to run:

<script>
    $(function() {

        var availableTags = <?php echo json_encode($arr); ?>

        $( "#auto" ).autocomplete({
            source: availableTags;
        });

    });
</script>

And here is the form:

<form method="post" action="BlinkDaggerQuiz.php" class="answer_box">
    <p>Which hero is it?  <input type="text" id="auto" name="guess" /></p>
</form>

And my head tags:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="BlinkDaggerQuiz.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

I can't figure out what I'm missing; the autocomplete options will not show in the text box. I've also tried substituting implode() for the json_encode(), but got the same non-results.

What does the actual (rendered) page source look like at var availableTags? Is that variable getting set properly? — Nate Barbettini
– Nate Barbettini, Commented Sep 17, 2015 at 4:50

TreeTree · Accepted Answer · 2015-09-17 04:59:02Z

4

I believe your current code should be returning some syntax errors. Hit F12 and find out.

You appear to be trying to use the Autocomplete widget from jQuery UI. There is no autocomplete feature built into plain old jQuery so you will have to include jQuery UI as well.

This part is JavaScript:

$( "#auto" ).autocomplete({
    source: availableTags;
    });
});

This means availableTags needs to be a JavaScript array as well. The easiest syntax for JavaScript arrays is var myArray = ['a', 'b', 'c'];.

You need to output your PHP array into a JavaScript array which can be done with the implode function. If given an array, the implode function will join all values in that array. In your case you want the keys of the array to be in the array instead of the values. So you can use the array_keys function to retrieve all the keys in the given array. You will end up with:

var availableTags = [<?php echo '"' . implode ('","', array_keys ($arr)) . '"'; ?>];

When your page loads you should end up with a proper JavaScript array:

var availableTags = ["Abaddon","Alchemist", "Anti Mage", "Ancient Apparition", "Axe"];

To my knowledge there are no Dota heroes with double quotes in their names so using double quotes as strings should be fine..

answered Sep 17, 2015 at 4:59

TreeTree

3,2404 gold badges30 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mason Over a year ago

Thank you so much! I wasn't aware of the separate jquery-ui files I needed to add. It works excellently, thank you!

Jack jdeoel · Accepted Answer · 2015-09-17 08:05:20Z

Make sure linked with under file

<!-- html -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

autocomplete function work for array like

var availableTags = ["Abaddon","Alchemist", "Anti Mage", "Ancient Apparition", "Axe"];

so you need to change look like this as you need..

<?php
$new_arr = array();
$arr = array(
    "Abaddon" => "/BlinkDaggerSounds/abad_blink_01.mp3",
    "Alchemist" => "/BlinkDaggerSounds/alch_blink_01.mp3",
    "Anti Mage" => "/BlinkDaggerSounds/anti_blink_01.mp3",
    "Ancient Apparition" => "/BlinkDaggerSounds/appa_blink_01.mp3",
    "Axe" => "/BlinkDaggerSounds/axe_blink_01.mp3", 
);
    foreach ($arr as $key => $value) {
    $new_arr[] = $key;// or $value
    }
?>
<script>
$(function() {

    var availableTags = <?php echo json_encode($new_arr); ?>


   $("#auto").autocomplete({
       // source: availableTags;  // autocomplete source is not include ";" (semicolon)
          source: availableTags   //correct
   });

});
</script>

Collectives™ on Stack Overflow

Filling JQuery autocomplete with PHP array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related