http://jsfiddle.net/Share_Knowledge/dgtqptr7/
I am trying to use autocomplete functionality of jquery ui into my project But i have no idea why THE SECOND $('.search').autocomplete() is
not working.
maybe i have to use $.noConflict()
if yes how i can use it $.noConflict()
would any body tell me how to use it to solve this problem out
any help please i would be thankful
using firebug i get these errors
POST http://localhost/autoservice/public_html/tickets/load_spareparts/11/instance
First
i don't what is the word instance coming from..???
here is the order of the js files
-js/jquery-ui.min.js
-jquery.autocomplete.js
jQuery(document).ready(function($) {
$.ajaxSetup( { type: "post" } );
// THIS IS WORKING PERFECTLY
$("#item").autocomplete(url+'/item_search', {
minChars:0,
selectFirst: false,
width: 749,
multiple: false,
matchContains: true,
formatItem: formatItem,
formatResult: formatResult
});
// THIS SHOW THE ERROR WHICH MENTIONED UP THERE
// IT'S NOT WORKING
$('#search').autocomplete({
minLength: 0,
source: path3+'/get_spareparts',
focus: function( event, ui) {
$('#search').val( ui.item.item_id );
return false;
},
select: function(event, ui) {
output = '';
output += '<tr>';
output += '<td>'+ui.item.item_id+'</td>';
output += '<input type="hidden" value="'+ui.item.id+'" name="item_id"></td>';
output += '<td>'+ui.item.item_name+'</td>';
output += '<td>'+ui.item.price+'</td>';
output += '<td><input type="text" name="qty" value="" size="1" class="qty"></td>';
output += '<td>'+ui.item.desc+'</td>';
output += '<td>Delete</td>';
output += '</tr>';
$('.inject').append(output);
$(this).val('');
deleteItem(); // DELETE ITEM
return false;
}
}) .autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.desc + "<br>" + item.item_id + "</a>" )
.appendTo( ul );
};
function deleteItem () {
$('.spareTrash').on('click', function(event) {
event.preventDefault();
$(this).parent().parent().fadeOut(900, function(){ $(this).remove();});
});
}
}); // END READY JQUERY
Related
I have been using the jQuery ‘Autocomplete Widget’ for a number of years now. This has always been done but passing a value with ‘term’ to the PHP SQL code like this;
$( "#cs1" ).autocomplete({
autoFocus: true,
minLength: 3,
source: "gethint.php",
select: function( event, ui ) {
// This if undes the readonly on the Fname input field below
if ( ui.item.label == 'NONHAM' ) {$('#Fname').prop('readonly', false);}
$( "#cs1" ).val( ui.item.label );
$( "#hints" ).val( ui.item.value );
$( "#Fname" ).val( ui.item.desc );
var nc = $( "#thenetcallsign" ).html();
//return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + " ---> " + item.desc + "</a>" )
.appendTo( ul );
};
});
But now I have to add another condition to the SQL code to return a more detailed value. The value for this additional condition is;
var nc = $( "#thenetcallsign" ).html();
The problem is I don’t know how to add this to ‘term’ or a separate variable and pass it to gethint.php using the ‘Autocomplete’ widget.
Once I get the extra value to the PHP program I know what to do.
Would somebody please explain or show me how to do this?
You might have to stringify it but pass the extraParams
extraParams: { type: "CoolCode" },
var nc = $("#thenetcallsign").html();
$("#cs1").autocomplete({
autoFocus: true,
minLength: 3,
source: "gethint.php",
extraParams: {
nc: nc
},
select: function(event, ui) {
// This if undes the readonly on the Fname input field below
if (ui.item.label == 'NONHAM') {
$('#Fname').prop('readonly', false);
}
$("#cs1").val(ui.item.label);
$("#hints").val(ui.item.value);
$("#Fname").val(ui.item.desc);
var nc = $("#thenetcallsign").html();
//return false;
}
})
.data("ui-autocomplete")._renderItem = function(ul, item) {
return $("<li>")
.append("<a>" + item.label + " ---> " + item.desc + "</a>")
.appendTo(ul);
};
});
source could be a function in order to get more flexibility
$( "#cs1" ).autocomplete({
/* ... */
source: function(request, response) {
$.getJSON( "gethint.php", {
term: request.term ,
nc: $( "#thenetcallsign" ).html()
}, response );
},
/* ... */
});
I am processing nested getJSON data in the below code, where > 1 record is returned and sorted by autocomplete.
{
"ok": [
{
"myName": "Back Office",
"myModule": "back01",
"myDesc": "Developing a the platform"
},
......
]
}
When the final data (lets say 6 matching records) are passed to .autocomplete( "instance" ) each call to update return $( "<li>" ) seems to overwrite the previous returned JSON data, meaning only the last record is displayed instead of the 6 that are valid Is the JSON.
I note that when debugging the .autocomplete routine is looping through the correct number of times to match the number of records, it is just that each loop seems to overwrite the <li> with a fresh object rather than append to the previous record.
Why is the overwrite happening?
thanks
Art!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$( function() {
$( "#my_module_in" ).autocomplete({
minLength: 1,
source: function( request ,response){
$.getJSON("https://api.myapi.com/getStuff", function (data) {
$.each(data, function (okKey, val00) {
if ( okKey === 'ok') {
$.each(val00, function (key201, val201) {
response($.map(data, function (item) {
return {
label: val201.myName,
value: val201.myModule+"_"+val201.myDesc,
}
}))
})
}else{
console.log("error:noJson");
}
})
});
},
focus: function( event, ui ) {
console.log(ui.item.label);
return false;
},
select: function( event, ui ) {
$( "#my_module_in" ).val( ui.item.label);
$( "#my_module" ).val( ui.item.value);
$( "#my_module_description" ).html( ui.item.value );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<div>" + item.label + "<br>" + item.value + "</div>" )
.appendTo( ul );
};
});
</script>
</head>
<body>
<div id="my_module_label">Op_Group</div>
<input id="my_module_in">
<input type="hidden" id="my_module">
<p id="my_module_description"></p>
You need an empty array containing the results found in the $.each ($.map()) operation. Then, in the $.map() function, for every item push the current object in the empty array.
Finally, call the response callback function with the array that you filled.
var result = [];
$.each(val00, function(key201, val201) {
$.map(data, function(item) {
result.push({
label: val201.myName,
value: val201.myModule + "_" + val201.myDesc
});
});
});
response(result);
Something like this:
$(function() {
$("#my_module_in").autocomplete({
minLength: 1,
source: function(request, response) {
$.getJSON("https://gist.githubusercontent.com/dannyjhonston/51e9ea30dddd09d9f82a8e78b8a51de2/raw/9ad8b1b40377a6807548b444491846dd13025902/getStuff.json", function(data) {
$.each(data, function(okKey, val00) {
if (okKey === 'ok') {
var result = [];
$.each(val00, function(key201, val201) {
$.map(data, function(item) {
result.push({
label: val201.myName,
value: val201.myModule + "_" + val201.myDesc
});
});
});
response(result);
} else {
console.log("error:noJson");
}
});
});
},
focus: function(event, ui) {
console.log(ui.item.label);
return false;
},
select: function(event, ui) {
$("#my_module_in").val(ui.item.label);
$("#my_module").val(ui.item.value);
$("#my_module_description").html(ui.item.value);
return false;
}
})
.autocomplete("instance")._renderItem = function(ul, item) {
return $("<li>").append("<div>" + item.label + "<br />" + item.value + "</div>").appendTo(ul);
};
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="my_module_label">Op_Group</div>
<input id="my_module_in" type="text">
<input type="hidden" id="my_module">
<p id="my_module_description"></p>
I'm trying to create a text input with text completion using a remote host.
I've been trying to use the example in the following URL: http://demos.jquerymobile.com/1.4.0/listview-autocomplete-remote/
this is the javascript code from the example:
$( document ).on( "pageinit", "#myPage", function() {
$( "#autocomplete" ).on( "filterablebeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" );
if ( value && value.length > 2 ) {
$ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
$ul.listview( "refresh" );
$.ajax({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
crossDomain: true,
data: {
q: $input.val()
}
})
.then( function ( response ) {
$.each( response, function ( i, val ) {
html += "<li>" + val + "</li>";
});
$ul.html( html );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
});
}
});
});
so first of all I changed dataType from jsonp to json which makes the ajax call
return a proper json object and the unordered list is filled properly.
the problem that I encounter is that once I see the text completion (the li elements), I can't select any of the elements.
I tried browsing this example on my Galaxy Note 2 and I encountered the same problem, the elements are not selectable.
any ideas how to resolve the issue?
thanks
update
as to #Omar comment i changed the following line:
html += "<li>" + val + "</li>";
to
html += "<li><a href='#'>" + val + "</a></li>";
now i can click on an item but it doesn't do anything. it supposed to close the list and add to the text field the selected item.
You need to delegate an event to generated list items and then update input with the value.
$("#autocomplete").on("click", "li", function () {
/* text of clicked element */
var value = $(this).text();
/* update value of input */
$("#autocomplete-input").val(value);
/* optional - remove autocomplete result(s) */
$(this).parent().empty();
});
Demo
I'm using the following auto-complete plugin that uses Jquery Auto Complete. It works well and does exactly what I need but my problem is that my JSON file has thousands of products with description, and images. Many of the images are down and don't work.
Does any one know how I can replace those broken image links with a general local image? I can't manually go into the JSON file and replace those images as it would take weeks.
I looked at this but no help: "http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images"
Any help is very much appreciated.
Here's FoxyComplete's JS and a link to the full script (Sorry couldn't get JsFiddle to work -- http://www.bcreatives.com.au/wp-content/uploads/dev/foxycomplete-local/):
(function($) {
$(document).ready(function() {
$( '#s' ).each( function(){
$(this).attr( 'title', $(this).val() )
.focus( function(){
if ( $(this).val() == $(this).attr('title') ) {
$(this).val( '' );
}
} ).blur( function(){
if ( $(this).val() == '' || $(this).val() == ' ' ) {
$(this).val( $(this).attr('title') );
}
} );
} );
$('input#s').result(function(event, data, formatted) {
$('#result').html( !data ? "No match!" : "Selected: " + formatted);
}).blur(function(){
});
$(function() {
function format(mail) {
return "<a href='"+mail.permalink+"'><img src='" + mail.image + "' /><span class='title'>" + mail.title +"</span></a>";
}
function link(mail) {
return mail.permalink
}
function title(mail) {
return mail.title
}
$("#s").autocomplete(completeResults, {
width: $("#s").outerWidth()-2,
max: 5,
scroll: false,
dataType: "json",
matchContains: "word",
parse: function(data) {
return $.map(data, function(row) {
return {
data: row,
value: row.title,
result: $("#s").val()
}
});
},
formatItem: function(item) {
return format(item);
}
}).result(function(e, item) {
$("#s").val(title(item));
//location.href = link(item);
});
});
});
})(jQuery);
I believe the accepted answer to the SO question you linked should work. Just replace your format function with the following:
function format(mail) {
return "<a href='"+mail.permalink+"'>" +
"<img src='" + mail.image + "' onerror='this.src=\'/img/error.jpg\'' />" +
"<span class='title'>" + mail.title +"</span></a>";
}
And make sure you have an image called /img/error.jpg, natch.
I am having great difficulty in successfully parsing a JSON file to use within JQuery UI autocomplete
Please see my dev page: http://www.zyredesign.com/autocomplete
The JSON isn't organised as well as I would have hoped as the items keys are ID's eg:
{"140":"Abarth",
"375":"Acura"
}
Etc....
Here is my javascript attempt:
$(document).ready(function() {
$('#cars').autocomplete({
source: function()
{
$.getJSON('json.json', function(data)
{
cars_array = new Array();
$.each(data, function(k, v) {
cars_array.push(v);
})
alert( cars_array);
return cars_array;
})
},
minLength: 3,
focus: function( event, ui ) {},
select: function( event, ui ) {
$('#suggestions').html(ui);
return false;
}
});
});
/*
function get_json()
{
var items = new Array();
$.getJSON('json.json', function(data) {
var items = [];
alert( eval ("(" + data + ")") );
// $.each(data, function(key, val) {
//items.push('<li id="' + key + '">' + val + '</li>');
// });
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('body');
});
return items;
}
*/
Any help would be greatly appreciated, thanks!
The function you've supplied for the source: attribute doesn't return a value. The $.get() function does, but that won't reach the source attribute.
source: function()
{
$.getJSON('json.json', function(data)
{
cars_array = new Array();
$.each(data, function(k, v) {
cars_array.push(v);
})
return cars_array;
})
//You need to return something here
}
Also, it may be an issue that you're using an asynchronous call to the json file in a synchronous pattern. In other words, consider this:
$.getJSON('json.json', function(data)
{
cars_array = new Array();
$.each(data, function(k, v) {
cars_array.push(v);
})
//Now you definitely have the cars so you can do the autocomplete
$('#cars').autocomplete({
source:cars_array,
minLength: 3,
focus: function( event, ui ) {},
select: function( event, ui ) {
$('#suggestions').html(ui);
return false;
}
});