javascript - autocomplete hightlight text issue - javascript

I have a search engine that display a list of results when you search something.
The problem is that when I slect one of those results, in the input will apear this text : "<span style='font-weight:bold; color:" and not the word wich is for search.
For example if I want to search the word "football", in the search input will appear this text :"<span style='font-weight:bold; color: and not the word "football".
Also in the url the var t appears as a <span> code and not the word "football"
My code is this :
$("#search-field").data('ui-autocomplete')._renderItem = function(ul, item) {
var re = new RegExp("^" + this.term) ;
var t = item.label.replace(re, "<span style='font-weight:bold; color:#000;'>" +
this.term +
"</span>");
return $('<li></li>')
.data("item.autocomplete", item)
.append('' + t + '')
.appendTo(ul);
};

Related

html Text editor value is not getting saved

I want to use a text editor in my page.the editor that I have used is
"Responsive-WYSIWYG-Text-Editor-with-jQuery-Bootstrap-LineControl-Editor"
This my div tag on which I have applied the text editor and like this I have 5 more div tags with different id's on which I have used this editor
<div rows="" cols="" class="form-control Editor-editor" type="text" id="achievementresponsiblity" detail="industry" indus="indus" placeholder="Responsibilities And Achievements" name="Responsibility"></div>
when I am trying to save the content or text written/entered in these divs it's not saving any data. I mean it's not taking the value written in it. Json that I have created for it is as follows
$("#Projectssave").click(function () {
var remarks = 0;
jsondata = "";
if ($('[type="checkbox"][industry="project"]').prop("checked") == true) {
remarks = 1;
}
jsondata += "'ProjectTypeId':'5',"
jsondata += "'Remark':'" + remarks + "',"
jsondata += "'Responsibility':'" + $("#achievementresponsiblity").text().replace(/'/g, "&apos;").replace(/"/g, "&Double;").replace(/</g, "<").replace(/>/g, "&tg;").replace(/\\/g, """) + "',";
$.each($('input[detail="Projects"][type="text"],input[detail="Projects"][type="number"],textarea[detail="Projects"],select[detail="Projects"]'), function () {
jsondata += "'" + $(this).attr('name') + "':'" + $(this).val().replace(/'/g, "&apos;").replace(/"/g, "&Double;").replace(/</g, "<").replace(/>/g, "&tg;").replace(/\\/g, """) + "',";
});
jsondata = jsondata.substr(0, jsondata.length - 1);
jsondata = '{' + jsondata + '}';
saveindustrlial(jsondata, $(this).attr("savetype"), "Projects Details");
});
but it just save null data in it. I don't know how to deal with it I am done with trying almost everything.
You can find some documentation about the LineControl editor here: https://github.com/suyati/line-control
To get the text from the editor:
$("#achievementresponsiblity").Editor("getText");
To set the text in the editor:
$("#achievementresponsiblity").Editor("setText", "Your text value");

JS how right replace `&quot` on quotes

<input type="text" autocomplete="off" class="Autocomlete1" name="test">
$('.Autocomlete1').typeahead({
ajax: {
url: './test.php?log=test',
triggerLength: 1
},
updater: function(item) {
return item;
},
onSelect: function(item) {
return item;
}
});
After autocomplate in input we get nextvalue - Text " TextTextText " (database row have it value) but need output Text " TextTextText "
For replace " on " i want make:
onSelect: function(item) {
var text = item.text;
var text = text.replace(/"/g, '"');
$('.Autocomlete1').val(text);
return item;
}
But this is not working...
Tell me please how right replace &quot on quotes ?
if not working var text = text.replace(/"/g, '\\"'); check other lines becouse it worked for me.
" is also needs a escape character before in string write '\"
var text = text.replace(/"/g, '\\"');

how to refresh the list in jquery javascript

Hi i m having one page with one textbox named search and one search button. When i'm searching anything for the first time it's showing me the right data but when i'm searching some other things for the next time then the elements which was listed before are also appended below of that new list. Suppose i'm searching state name by k it will give me right list of karnataka, kerala. But if i start to search again by g, it will show me in output as goa,gujrat,karnataka kerala. i tried using refresh option but it still not working. This is my js code
$.each(response.state, function (i, state) {
$('#statelist').append(
'<li>' +
'<a href="#">'
+
+'<b>'+ '<font color="green">'+'<h3>'+ state.Name +'</h3>'+'</font>' +'</b>'+
'</a>' +
'</li>'
);
});
$('li img').width(100);
$('.ui-li-icon li').click(function() {
var index = $(this).index();
text = $(this).text();
// alert('Index is: ' + index + ' and text is ' + text);
});
$("#statelist").listview("refresh");
and this is html
You are using .append() function. It appends whatever you append to the end of the list.
Check this link:
http://api.jquery.com/append/
Try using innerHTML property of the DOM model.
You could add
If(!('#statelist').html() == ""){
$(this).remove();
//execute rest of code that appends state list
}
Then do an else statement and execute your append code without removing()
UPDATE: a better option is to do this-
$.each(response.state, function (i, state) {
$('#statelist').html(
'<li>' +
'<a href="#">'
+
+'<b>'+ '<font color="green">'+'<h3>'+ state.Name +'</h3>'+'</font>' +'</b>'+
'</a>' +
'</li>'
);
});
$('li img').width(100);
$('.ui-li-icon li').click(function() {
var index = $(this).index();
text = $(this).text();
// alert('Index is: ' + index + ' and text is ' + text);
});

Unhide hidden words that have been removed from text box

I would like to allow users to select given words from a word bank and place those into a text box, where they will be removed (hidden) from the word bank. If the user makes a mistake and wants the word back, they can delete it from the text box which will place it back in the word bank.
How can this be done? (Please forgive the horrific ms paint image)
HTML:
Create sentence:
<input type="text" id="textBox" value="" />
<br/>
<button onclick="submitMe()" id="testButton" >Submit Response </button>
<br/>
<div class="wordBank_Headings">Word Bank:
<span class="wordBank_Words"></span>
</div>
JavaScript:
You will see here a portion that says /*THIS IS THE PORTION I AM HAVING TROUBLE WITH*/. I am trying to get all words from text box... if word is hidden and does not exist in text box... add it back to the Word Bank.
$(document).ready(function() {
playerResponse();
$(".bank-word").click(function (event) {
//append each newly selected word to $('#textBox').val()
$('#textBox').val($('#textBox').val() + " " + $(this).attr('word'));
//hide word from word bank
$(this).hide();
/*THIS IS THE PORTION I AM HAVING TROUBLE WITH*/
//Get all words from text box
//if word is hidden and does not exist in text box... add it back
$.each($('#textBox').val().split(/\s+/), function(index, word) {
console.log( index + ": " + word);
$('li.bank-word').find(':hidden').each(function(index) {
log("index : " + index + ", " + $(this).text());
$(this).show(); //reveal word in word bank again after we find that it is hidden AND has been deleted from text box
});
});
});
});
var words = {
"task1" :
{
'Ni' : 'you',
'Wo' : 'I',
'Hao' : 'good',
'Shi' : 'am'
}
}
function bank() {
$(".wordBank_Words").empty();
for (obj in words) {
for (key in words[obj]) {
$(".wordBank_Words").append("<li class='bank-word' word='" + key + "' ><b>" + key + "</b>: " + words[obj][key] + "</li>");
}
}
}
function submitMe() {
//will eventually verify input from textbox
var value = document.getElementById('test').value;
alert(value);
}
EDIT:
var array = [];
var i = 0;
$.each($('#textBox').val().split(/\s+/), function(index, word) {
array.push(word);
log("ARRAY: " + array[i] + array.length);
i++;
console.log( index + ": " + word);
for (obj in words) {
for (key in words[obj]) {
//if word doesn't exist in text box, and doesn't exist in word bank, add it
if (!isInArray(key, array) && is in wordbank...) {
key.show(); //pseudo code
}
}
}
});
function isInArray(value, array) {
return array.indexOf(value) > -1;
}

javascript/jquery- how to obtain all possible values in a drop down box or list box

I am trying to obtain all the values stored in a list box/drop down box.
I am currently using following code to obtain name, type, multiple attribute and values--
$(jQuery('input, select, textarea', $(this).parent('form'))).each(function() {
var textmsg=" Element # " + (count+1) + "...Name of this input element = " + $(this).attr('name') + " multiplechoice-" + $(this).attr('multiple');
textmsg= textmsg + "...Also, for this element, the value is " + $(this).val() + " and type =" + $(this).attr('type');
alert (textmsg);
});
But the jquery call $(this).val() retrieves only the currently selected value in a list box (and not all values). The same thing happens when I use the above code in a drop down box. How do I obtain all the values stored in a list/drop down box? If it is not possible to do this using jquery, then can this be done using pure javascript? (I have a reference to that form element which can be used in pure javascript...)
To create a list of your options you need to declare a variable outside of the loop
var listofoptions = new Array();
$("#id option").each(function()
{
// add $(this).val() to your list
listofoptions.push($(this).val());
});
// do what you want with listofoptions
You can get all fields inside form using following code
var formFields = $("form")[0];
var textmsg = "";
for ( var i = 0, len = formFields.length; i < len; i++ ) {
textmsg +=" Element # " + (i+1) + "...Name of this input element = " + $(formFields[i]).attr('name') + " multiplechoice-" + $(formFields[i]).attr('multiple');
textmsg= textmsg + "...Also, for this element, the value is " + $(formFields[i]).val() + " and type =" + $(formFields[i]).attr('type');
}
document.write( textmsg );
jsFiddler

Categories

Resources