CODEWITHSUNDEEP
javascriptphpjqueryhtmlautocomplete
AS17
AS17

Reputation: 79

PHP - autocomplete with php and javascript

I am working on an autocomplete script where i first read files from a local directory using php as shown below:

<?php
$file = glob('pages/*');
//var_dump($file); 

foreach($file as $value)
{
    $output = substr($value, 6, strlen($value) - 6);
    //echo($output)."<br>";
}
?>

the above script displays all the files in the 'pages' folder i.e pageone.html,pagetwo.html....

i then use a javascript file to dispaly a text field that when entered for example 'page', should show aome autocomplete options say 'pageone.html' or 'pagetwo.html' e.t.c

<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = ["
<?php echo $output; ?>"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>

i combine the above php code with this js to a single php file

as shown, i try embedding the '$output' into the js 'availableTags' variable but when i type something on the text field, nothing happens..i'm sure it has to do with the php code embedded in the js so any help would be appreciated

Upvotes: 0

Views: 924

Answers (2)

Baptiste Donaux
Baptiste Donaux

Reputation: 1310

You can use autocomplete.js. It's more lite and easy to use that jQuery UI.

Upvotes: 1

mesutozer
mesutozer

Reputation: 2859

Your $output contains only a single value (last file in your list). You can create an array of files like:

$res = array();
foreach($file as $value)
{
    $res[] = substr($value, 6, strlen($value) - 6);
}

and pass it to javascript as: a javascript array (with json_encode function)

<script>
$(function() {
var availableTags = <?=json_encode($res)?>
...

Upvotes: 1

Related Questions