All geek questions in one place

Jquery autocomplete filling with PHP array

I am a relative noob for JavaScript and JQuery, but I searched the Internet for many hours to find the answer to this question. I am trying to populate a jQuery autocomplete function using an array that I created in PHP. This is an array fragment:

<?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 title 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 cannot understand what I am missing; autocomplete options will not appear in the text box. I also tried replacing implode()with json_encode(), but got the same non-results.

+4
source share
2 answers

, . F12 .

, Autocomplete jQuery. , jQuery, jQuery UI.

JavaScript:

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

, availableTags JavaScript. JavaScript - var myArray = ['a', 'b', 'c'];.

PHP- JavaScript, implode. , implode . , . , array_keys . :

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

, JavaScript:

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

, Dota , , , .

+3

,

<!-- 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">

,

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

, .

<?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>
0

Source: https://habr.com/ru/post/1607750/

More articles:


All Articles