Using xml as a source in jquery autocomplete

Question

I'm trying to use jquery autocomplete for a text input. What I want is that when user types a letter, results starting with the specified letter will be shown from an xml source. But I can't make it work. As I'm quite new in jquery, I don't know what I'm doing wrong. Please help :)

Also I tested the php file, it works fine as xml

Here's the code

$("#names").autocomplete({
    source: function(request , response){
        $.ajax({
           type: 'GET',
            url: 'name.php',
            dataType: "xml",
            data: "letter="+request,
            success: function(data) {
                var xml;

                if (typeof data == "string") {
                    xml = new ActiveXObject("Microsoft.XMLDOM");
                    xml.async = false;
                    xml.loadXML(data);
                } else {
                    xml = data;
                }

                var array = [];
                var i = 0;

                $(xml).find('nameslist').each(function(){
                    array[i] = $(this).find("name").text();
                    i++;
                });
            }
        }); 
        response(array);
    },
    minLength: 1
});

Andreyco · Accepted Answer · 2011-01-06 22:23:51Z

1

So go with JSON :)

$("#names").autocomplete({
    source: function(request , response){
        $.ajax({
           type: 'GET',
            url: 'name.php',
            dataType: "json",

In your 'name.php' do following

<?php
  // do all your code here, get names etc....

  // lets say your array with names looks like this
  // $names = array('Peter', 'John', 'Tom', 'Andy');

  // serialize the array and send it to the browser
  echo json_encode($names);     // edited here
?>

In your .js file...

  var names = jQuery.parseJSON('["Peter","John","Tom","Andy"]');
  // just to try, if this works, uncoment alert() below this
  //alert( names[3] );

So my complete code would be like this

$("#names").autocomplete({
    source: function(request , response){
        $.ajax({
            type: 'GET',
            url: 'name.php',
            dataType: "json",
            data: "letter="+request,
            success: function(data) {
                var names = jQuery.parseJSON(data);   
            }
        }); 
        response(names);
    },
    minLength: 1
});

edited Jan 6, 2011 at 22:23

answered Jan 6, 2011 at 16:32

Andreyco

22.9k5 gold badges63 silver badges66 bronze badges

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

6 Comments

Onur Kucukkece Over a year ago

well if I use serialize function in php I get exception not caught error and if I don't then names returns null. Also I think I'll have a charset problem with json_encode, my results will be in iso-8859-9 charset

Andreyco Over a year ago

I am sorry, just skip "serialize", JSON encode is enough for this operation. My fault, I edited the code ;-)

Andreyco Over a year ago

What is the status your progress? Do you need any other help?

Onur Kucukkece Over a year ago

actually I equalized success to response, then it worked fine but then I had the charset problem as I expected, so now I'm using a plugin from bassistance.de

Onur Kucukkece Over a year ago

I'm using jquery UI autocomplete 1.8 back again and I found a very simple solution. I put "|" between each result in php and sending a single string to js, then in js I split the data by "|" and assign it to an array and it works :) thank you very much for your effort

|

Onur Kucukkece · Accepted Answer · 2011-01-07 21:02:31Z

1

Here's the solution I found for the code above

in .js

$("#names").autocomplete({
    source: function(request , response){
        $.ajax({
            type: 'GET',
            url: 'names.php',
            data: "letter="+$("#names").val(), //request doesn't work here, I don't know why
            success: function(data) {
                var explode = data.split("|");                      
                response(explode);
            }
        }); 
    }
});

in php file

if(isset($_GET['letter'])){
    $letter = $_GET['letter'];
    $sql = "select name from name_list where name like '".$letter."%'";
    $query = mysql_query($sql);

    while($result = mysql_fetch_row($query)){
        echo $result[0].'|';    
    }
}

edited Jan 7, 2011 at 21:02

answered Jan 7, 2011 at 11:59

Onur Kucukkece

1,7881 gold badge21 silver badges48 bronze badges

Comments

Robert · Accepted Answer · 2011-01-06 16:09:24Z

0

I'm new in JQuery myself, but shouldn't it be typeof(data) == "string" ?

answered Jan 6, 2011 at 16:09

Robert

1122 silver badges13 bronze badges

2 Comments

Onur Kucukkece Over a year ago

generally ajax function works fine, I used same syntax in several functions and it didn't make a problem

Robert Over a year ago

Do you know exactly where it fails? Have you dropped in ALERT statements to step through the code?

Josh Bedo · Accepted Answer · 2011-01-06 16:31:38Z

0

Why would you want to grab a letter from an xml file? Why not attach the letters using .html to a div below. If your doing an autocomplete id have a mysql database which would hold a list of items for autocomplete and for the textbox every keyup check if the textbox has a string inside if it does make an ajax request with jquery to your php file where you then strip the $get searchword then you can have it inside the php file grab results like the string and have javascript at the bottom attach the string to your div wwith html

answered Jan 6, 2011 at 16:31

Josh Bedo

3,4723 gold badges24 silver badges33 bronze badges

2 Comments

Josh Bedo Over a year ago

I can post some code later when I get home from school, if you need any more explanation or help feel free to ask

Onur Kucukkece Over a year ago

actually it would be nice if you could post some examples on how the formats of the divs should be and yes I'm using mysql to get results

Collectives™ on Stack Overflow

Using xml as a source in jquery autocomplete

4 Answers 4

6 Comments

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related