CODEWITHSUNDEEP
javascriptphpjqueryjquery-uiautocomplete
maricos
maricos

Reputation: 29

Jquery autocomplete custom HTML results

I'm building a search with jQuery UI Autocomplete (http://jqueryui.com/demos/autocomplete/)

I am also utilizing the jQuery UI Autocomplete HTML Extension so I can style the search nicely and display icons according to the category where the search result is in.

My problem is, when I click on a result which looks like this:

(Category Icon) Pink Floyd - Category

It comes out like this in the search input field:

<div class="search_icons"><img src="images/ico/search_icon_rock.png" class="search_pic_radius"></div>Pink floyd<div class="autocomplete_category"> Rock</div><div class="artist_id_search">15</div><div class="artist_name_search">pink-floyd</div>

This is how my search.php looks like:

if (isset($_GET['term'])){
    $return_arr = array();

    try {
        $conn = new PDO("mysql:host=".DB_SERVER.";port=8889;dbname=".DB_NAME, DB_USER, DB_PASSWORD);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $stmt = $conn->prepare('SELECT url_name,name,category,id FROM artists WHERE name LIKE :term OR category LIKE :term LIMIT 10');
        $stmt->execute(array('term' => '%'.$_GET['term'].'%'));

        while($row = $stmt->fetch()) {
            if($row['category'] == '1') { $category_icon = '<div class="search_icons"><img src="images/ico/search_icon_rock.png" class="search_pic_radius"></div>'; }
            if($row['category'] == '2') { $category_icon = '<div class="search_icons"><img src="images/ico/search_icon_pop.png" class="search_pic_radius"></div>'; }

            $return_arr[] = $category_icon . $row['name'] . '<div class="autocomplete_category"> ' . $row['category'] . '</div>'. '<div class="artist_id_search" id="artist_id_search">' . $row['id'] . '</div>'. '<div class="artist_name_search" id="artist_name_search">' . $row['url_name'] . '</div>' ;

        }

    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }

    echo json_encode($return_arr);
}

What I'm trying to achieve is, when clicking on something on the autocomplete it should submit the form with the value from the last two div's artist_id_search and artist_name_search so on submit the next page would become whatever.php?id=15&artist=pink-floyd

What I have tried is to remove the unnecessary parts from the search string with the split function but then I just ended up with the id and the url_name parameters in the search field which didn't really achieve anything also it didn't really work reliably with changing icon names and such.

Upvotes: 1

Views: 674

Answers (1)

Sameer Shemna
Sameer Shemna

Reputation: 906

Well instead of returning HTML from the PHP service you have made in JSON, you should be returning a proper JSON like in the form of 

[
{"id":"15","name":"pink-floyd","value":"Pink Floyd"},
{...
]

then handle it in your javascript as:

$( "#your_input_id" ).autocomplete({
      source: "your_php_page.php",
      minLength: 2,
      select: function( event, ui ) {//callback function when you select an item
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
        window.location.href = 'whatever.php?id=ui.item.id&artist=ui.item.name';
      }
    });

Hope you get it sorted :)

Upvotes: 1

Related Questions