Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

AJAX - first attempt

Status
Not open for further replies.

Marine1969

IS-IT--Management
Mar 5, 2015
60
0
0
US
I am trying to create an autocomplete textbox using ajax php and mysql, this is the first time I am trying this. I have found many websites but cannot get them to work. I have 2 pages, textbox.html and search.php. My database I use an include for "db_connect.php" and within it has a table called 'products' and the field I am trying to autocomplete is 'name'. I am not getting any autocomplete. What am I doing wrong?

This is what I have for the html...
HTML:
<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>

<script>
 $(function() {
    $( "#tag" ).autocomplete({
        source: 'search.php'
    });
 });
</script>

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

</html>

And this is the php...
PHP:
<?php
    //database configuration
    include "db_connect.php";
    
    //get search term
    $searchTerm = $_GET['term'];
    
    $str=$conn->prepare("Select name From products Where name LIKE '%".$searchTerm."%' ORDER BY name ASC");
    $str->execute();
    $select = $str->fetchAll();
    
    foreach($select as $row){
       $data[] = $row['name'];
    }
    
    //return json data
    echo json_encode($data);
?>
 
Hi

Works fine for me using PHP 7.1 and MySQL 5.7 on Linux.

Can you run it from command line ?
Code:
[blue]master #[/blue] ( echo '<?php $_GET["term"]="e"; ?>'; cat search.php ) | php
["eight","five","nine","one","seven","ten","three"]


Feherke.
feherke.github.io
 
Below is the result from the terminal. When I run the webpage I don't get any errors, but also no autocomplete. I am running linux mint with chrome browser. Hope this helps.

$ master # ( echo '<?php $_GET["term"]="e"; ?>'; cat search.php ) | php
No command 'master' found, did you mean:
Command 'master1' from package 'pvm-examples' (universe)
Command 'paster' from package 'python-pastescript' (main)
Command 'aster' from package 'code-aster-mpi-engine' (universe)
master: command not found
$ ["eight","five","nine","one","seven","ten","three"]
 
Hi

Sorry for the confusion, the "[blue]master #[/blue]" is my command prompt. :-( You only need to type what is after.
And the JSON on the 2[sup]nd[/sup] line is the output of script -- that would be sent back to the browser if would be run by the web server.

BTW, you loaded textbox.html in your browser through the web server, right ? I mean, the URL in the browser's address line starts with [tt]http://[/tt] or [tt]https://[/tt], not with [tt]file://[/tt].


Feherke.
feherke.github.io
 
I ran it with the "master #" (UGH) It worked, there was an export of the products. So the php script is working? Is there a special textbox I need to be using?
 
Hi

Then it should work, assuming those 2 files are in the same directory, loaded through HTTP protocol and nothing else ( like content security policy, proxy or firewall ) stops loading the external scripts.

Is there any error mentioned in the browser's developer tools' Console and Network tabs ?


Feherke.
feherke.github.io
 
Yes they are both in the same folder on the localhost. And the only error I get is...

/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)

I'm not even using a favico. Either way,would this stop it from working?
 
Hi

Nah, that is not a problem. The browser tries its luck to see whether there is an icon it could display on the left side of the address bar. If not, just uses the default dummy icon and that's all.

Back to the Network tab, do you see any success ? For example after I type "e" in that Tags input, then appears :
[ul]
[li]Firebug's Net tab :
firebug-net_hcbeg0.png
[/li]
[li]Firefox's own web developer tools Network tab :
firefox-network_ifqp0z.png
[/li]
[/ul]
As you see, I get the same as earlier in the command line. You should also get the same as earlier.


Feherke.
feherke.github.io
 
Hi

Now things are becoming weird. That is still fine.

Assuming when you click any of those lines in the Network tab you see details similar to those on my screenshots.

And no autocompletion list is displayed like this ?
autocomplete_ehcufa.png


BTW, which browser versions you use ?


Feherke.
feherke.github.io
 
Correct, I get no auctocomplete for any letters.

Version 65.0.3325.181 (Official Build) Built on Ubuntu , running on LinuxMint 18.3 (64-bit)
Firefox Quantum 59.0.1 (64-bit)

Just for grins I moved the files up to the localhost folder and changed the path for the db but still no luck.

Also, I uploaded them to my remote server and did not get the autocomplete.
 
Hi

Sorry, I am out of ideas. :-(

Just wondering whether the HTML of you page may contain something else beside what you posted. Maybe the autocomplete actually works, just something else closes the list immediately, before you can notice its presence ?

Marine1969 said:
Also, I uploaded them to my remote server and did not get the autocomplete.
In case it is publicly accessible, we could take a look at it.

Just some generic advices :
[ul]
[li]Normally there should be nothing directly between the [tt][ignore]<html>[/ignore][/tt] .. [tt][ignore]</html>[/ignore][/tt] tags, everything should go either between [tt][ignore]<head>[/ignore][/tt] .. [tt][ignore]</head>[/ignore][/tt] or [tt][ignore]<body>[/ignore][/tt] .. [tt][ignore]</body>[/ignore][/tt][/li]
[li][tt][ignore]<input>[/ignore][/tt] tags should occur only between [tt][ignore]<form>[/ignore][/tt] .. [tt][ignore]</form>[/ignore][/tt] tags[/li]
[li]The jQuery code that queries for the element with [tt]id[/tt] tag should be executed after the given element was created[/li]
[li]Pass the search term to the prepared statement as parameter to keep Bobby Tables away[/li]
[li]Before returning the JSON encoded data, set the [tt]Content-Type[/tt] HTTP response header accordingly[/li]
[/ul]
Unfortunately these should make no difference for now.

Code:
[b]<html>[/b]

[b]<head>[/b]
[b]<link[/b] [maroon]rel[/maroon][teal]=[/teal][i][green]"stylesheet"[/green][/i] [maroon]href[/maroon][teal]=[/teal][i][green]"//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"[/green][/i][b]>[/b]
[b]<script[/b] [maroon]src[/maroon][teal]=[/teal][i][green]"//code.jquery.com/jquery-1.10.2.js"[/green][/i][b]></script>[/b]
[b]<script[/b] [maroon]src[/maroon][teal]=[/teal][i][green]"//code.jquery.com/ui/1.11.4/jquery-ui.js"[/green][/i][b]></script>[/b]
[b]</head>[/b]

[b]<body>[/b]

[b]<form[/b] [maroon]action[/maroon][teal]=[/teal][i][green]""[/green][/i][b]>[/b]

[b]<div[/b] [maroon]class[/maroon][teal]=[/teal][i][green]"ui-widget"[/green][/i][b]>[/b]
    [b]<label[/b] [maroon]for[/maroon][teal]=[/teal][i][green]"tags"[/green][/i][b]>[/b]Tags: [b]</label>[/b]
    [b]<input[/b] [maroon]id[/maroon][teal]=[/teal][i][green]"tag"[/green][/i] [maroon]autofocus[/maroon][b]>[/b]
[b]</div>[/b]

[b]</form>[/b]

[b]<script>[/b]
$[teal]([/teal][b]function[/b][teal]() {[/teal]
    $[teal]([/teal] [i][green]"#tag"[/green][/i] [teal]).[/teal][COLOR=orange]autocomplete[/color][teal]({[/teal]
        source[teal]:[/teal] [i][green]'search.php'[/green][/i]
    [teal]});[/teal]
[teal]});[/teal]
[b]</script>[/b]

[b]</body>[/b]

[b]</html>[/b]
Code:
[teal]<?php[/teal]
[gray]//database configuration[/gray]
[red]include[/red] [i][green]"db_connect.php"[/green][/i][teal];[/teal]

[navy]$str[/navy] [teal]=[/teal] [navy]$conn[/navy][teal]->[/teal][COLOR=orange]prepare[/color][teal]([/teal][i][green]"select name from products where name like :name order by name asc"[/green][/i][teal]);[/teal]
[navy]$str[/navy][teal]->[/teal][COLOR=orange]execute[/color][teal]([[/teal][i][green]':name'[/green][/i] [teal]=>[/teal] [i][green]"%{$_GET['term']}%"[/green][/i][teal]]);[/teal]
[navy]$select[/navy] [teal]=[/teal] [navy]$str[/navy][teal]->[/teal][COLOR=orange]fetchAll[/color][teal]();[/teal]

[b]foreach[/b] [teal]([/teal][navy]$select[/navy] [b]as[/b] [navy]$row[/navy][teal]) {[/teal]
   [navy]$data[/navy][teal][] =[/teal] [navy]$row[/navy][teal][[/teal][i][green]'name'[/green][/i][teal]];[/teal]
[teal]}[/teal]

[gray]//return json data[/gray]
[COLOR=orange]header[/color][teal]([/teal][i][green]'Content-Type: application/json'[/green][/i][teal]);[/teal]
[b]echo[/b] [COLOR=orange]json_encode[/color][teal]([/teal][navy]$data[/navy][teal]);[/teal]


Feherke.
feherke.github.io
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top