jQuery Autocomplete with images :a small customization

Question

Hi All,

I am a newbie in jQuery. I am trying to use the auto complete jQuery pluggn in my ASP.NET page .I downloaded the sample from the site and trying to rewrite it from PHP to ASP.NET

Can any one help me to rewrite it ?

<script type="text/javascript">

$().ready(function() {

function findValueCallback(event, data, formatted) {
 $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
}

function formatItem(row) {
 return row[0] + " (<strong>id: " + row[1] + "</strong>)";
}
function formatResult(row) {
 return row[0].replace(/(<.+?>)/gi, '');
}


$("#imageSearch").autocomplete("images.php", {
 width: 320,
 max: 4,
 highlight: false,
 scroll: true,
 scrollHeight: 300,
 formatItem: function(data, i, n, value) {
  return "<img src='images/" + value + "'/> " + value.split(".")[0];
 },
 formatResult: function(data, value) {
  return value.split(".")[0];
 }
});

and page contains

<input type="text" id='imageSearch' />
  <input type="button" value="Get Value" />

Content of images.php

$term = $_REQUEST['q'];
$images = array_slice(scandir("images"), 2);
foreach($images as $value) {
if( strpos(strtolower($value), $term) === 0 ) {
 echo $value . "\n";
}

}

I have some question on this

1 . I understand the images.php will return the list of images.Can any one provide me the format with an example ?Will that be a collection of list items,or divs or a single string seperated by some characters

2 . How the javscript is formating the output received.In my case i want to return a list of items(image names) and a Text (caption) with an id for it.So that users will see the image and the text in the option list and when he chooses,i want to show another page there ( i want to use the anchor tag there to navigate to another page with the id of option which user selected.

Kindly guide me Thanks in advance

Answer 1

1 . I understand the images.php will return the list of images.Can any one provide me the format with an example ?Will that be a collection of list items,or divs or a single string seperated by some characters

Not having run the code, it will be a list of strings separated by newline ("\n") chars; e.g.,:

"image1.jpg\nimage2.jpg\nimage3.jpg"

2 . How the javscript is formating the output received.In my case i want to return a list of items(image names) and a Text (caption) with an id for it.So that users will see the image and the text in the option list and when he chooses,i want to show another page there ( i want to use the anchor tag there to navigate to another page with the id of option which user selected.

You might want to have a look at JSON if you want to return structured data from the server.