javascript - Filling JQuery autocomplete with PHP array - Stack Overflow

admin2025-04-22 0

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 autoplete 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" ).autoplete({
            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=".11.3/jquery.min.js"></script>
</head>

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

<?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" ).autoplete({
            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./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

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

Share Improve this question edited Sep 17, 2015 at 4:49 Nate Barbettini 53.9k28 gold badges136 silver badges152 bronze badges asked Sep 17, 2015 at 4:39 Mason 3194 silver badges13 bronze badges

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

Add a ment |

2 Answers 2

Sorted by: Reset to default 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 Autoplete widget from jQuery UI. There is no autoplete feature built into plain old jQuery so you will have to include jQuery UI as well.

This part is JavaScript:

$( "#auto" ).autoplete({
    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..

Make sure linked with under file

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

autoplete 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").autoplete({
       // source: availableTags;  // autoplete source is not include ";" (semicolon)
          source: availableTags   //correct
   });

});
</script>

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745297001a295032.html

javascriptFilling JQuery autocomplete with PHP arrayStack Overflow

最新回复(0)