CODEWITHSUNDEEP
javascriptjqueryhtml
Rorschach
Rorschach

Reputation: 3802

Formatting JQuery outputs

I've got some jQuery that outputs text concerning products (Item title, URL).

I am looking for a way to display the output as a dropdown attached to the search bar, or as a table. I want it to display so that the title is seen by the user as a link to the URL.

A sample of the output can be seen below:

http://www.urbanoutfitters.com/urban/catalog/productdetail.jsp?id=36394526&category=M-VANS,Vans Tulare Denim Jacket,  
http://www.urbanoutfitters.com/urban/catalog/productdetail.jsp?id=36400869&category=M-VANS,Vans Rowley Snapback Hat,  
http://www.urbanoutfitters.com/urban/catalog/productdetail.jsp?id=36394344&category=M-VANS,Vans Nathan Fletcher Photo Tee

Right now this just displays as text on the page in this HTML. The "?" is replaced by the text output above.

<input type="text" name="search_text" placeholder="Enter search your key">

<span id=result>?</span>

The JavaScript is below:

<script type=text/javascript>
$(function() {
    $('a#calculate').bind('click', function() {
    $.getJSON($SCRIPT_ROOT + '/_autocomplete', {
        search_type: $('input[name="search_type"]').val(),
        search_text: $('input[name="search_text"]').val()
    }, function(data) {
        $("#result").text(data.result);
    });
    return false;
    });
});
</script>

Upvotes: 0

Views: 70

Answers (2)

yugi
yugi

Reputation: 874

try this one

   $("#result").append($("<a></a>").attr("href",url).html(url));


  or 
   $("#result").append($("<a></a>").attr("href",url).text(url));

Upvotes: 1

Adjit
Adjit

Reputation: 10305

Since there are no spaces in the url, you can split() the result and format accordingly.

var result = data.result.split(' ');
var url = '<a href="' + result[0] + '">';
var i;

for(i=1; i < result.length; i++){
    url += result[i];
    url += " ";
}
   /* Other Code */

$('#result').html(url);

Upvotes: 0

Related Questions