Response title
This is preview!
Move this topic
Auto-complete with pre-populated data in an input box
in Using jQuery UI
•
5 years ago
Hi,
How do we go about doing jQuery UI autocomplete with an input box with some populated data?
See below
<input type="text" name="myField" value="Some prepopulated data here," class="vest">
Notes:
(1) The "Some prepopulated data here" is retrieved from a database via a query
(2) The autocomplete list is supposed to show up when a user moves cursor into this field
Outcome for the field would be: Some prepopulated data here, An Unmarried Woman
if "An Unmarried Woman" is selected.
$(function() {
var vList = ["An Unmarried Woman","Married Couple"];
$(".vest").autocomplete({
source: vList,
select: function(event, ui) {
this.value = this.value + ui.item.value;
}
});
});
Thanks.
1
Replies(19)
Leave a comment on jakecigar's reply
Grt. One tiny problem, since we only need one more element for the field, the ending "," is totally unnecessary. How can we add a condition of ( Not last term element )
to the this.value = terms.join( ", " );
Many thanks.
Leave a comment on angryman45's reply
That solution allows for many additional values to be entered. If you want one. I would suggest using 2 inputs, one pre-filled and read only, and the other for the user to enter a single value.
Or maybe just get rid of
- terms.push( "" );
JΛ̊KE
Leave a comment on jakecigar's reply
Fabulous. I didn't know push "" // nothing, actually means to add another element. Many thanks.
Leave a comment on angryman45's reply
I have another related question.
The question has two parts.
The first, is it possible to have a list delimitered by "AND" with JS?
If so, how do changed the following line
return split( term ).pop();
into a similar one that uses the "AND" delimiter?
A quick look at split function does not help me with it.
Many thanks.
HTML
<input type="text" name="testme2" value="some stuff here2," class="vest2" size="110">
JS and jQuery
$(function() {
var vList = ["An Unmarried Woman" AND "A Single Man" AND "Married Couple" AND "A Married Couple With Joint Tenancy" AND "Husband And Wife"];
function split( val ) {
return val.split( /AND\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
// how to add list delimiter of "AND" above?
}
$(".vest2")
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
vList, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
// terms.push( "" );
this.value = terms.join( "AND " );
return false;
}
});
});
Leave a comment on angryman45's reply
The first, is it possible to have a list delimitered by "AND" with JS?
No. Use commas.
I guess you can use AND instead of a comma, but it could get messy if you also use SANDWICHES or BAND or anything with an upper case AND in it.
JΛ̊KE
PS the normal flow of questions and answers, here, is that you mark an answer as best, and then create another question.
yeah, I just found it out as well.
var vList = ["An Unmarried Woman","A Single Man","Married Couple","A Married Couple With Joint Tenancy" AND "Husband And Wife"];
function split( val ) {
return val.split( /,\s*/ );
Thanks.
I’m glad you are happy, but…
var vList = ["An Unmarried Woman","A Single Man","Married Couple","A Married Couple With Joint Tenancy" AND "Husband And Wife"];
should be
var vList = ["An Unmarried Woman","A Single Man","Married Couple","A Married Couple With Joint Tenancy" , "Husband And Wife"];
JΛ̊KE
Leave a comment on jakecigar's reply
"The first, is it possible to have a list delimitered by "AND" with JS?"
- var vList = ["An Unmarried Woman" AND "A Single Man" AND "Married Couple" AND "A Married Couple With Joint Tenancy" AND "Husband And Wife"];
That's nonsensical, invalid Javascript. List elements are separated by commas.
.split() works on STRINGS. It creates an array from a string. It splits the string at each delimiter, and puts each part in an array element.
Leave a comment on watusiware's reply
Jake wrote:
Well, no, you can't use AND instead of a comma - not in a javascript list initializer!
You could use AND in a string, and then split the string into a list. But I don't see what purpose it serves - you will just wind-up with the same list you would have had had you just used commas to start with. And you will have the problem Jake mentioned with AND in the middle of a word. (although less likely as it is all upper-case.)
- var vString = "An Unmarried Woman AND A Single Man AND Married Couple AND A Married Couple With Joint Tenancy AND Husband And Wife";
- var vList = vString.split('AND');
Leave a comment on watusiware's reply
Using AND was for the join, not for the initialization.
JΛ̊KE
Leave a comment on jakecigar's reply
Yeah, sometimes I didn't pay attention, the word, "join" should have been clear.
Also, I just found that the ending comma for the existing data as in
<input type="text" name="myField" value="Some prepopulated data here," class="vest">
is CRITICAL. Otherwise, the function won't work and no error. Just curious if there's a way not to include this COMMA.
Thanks.
Leave a comment on angryman45's reply
myField is not a part of the code I shared. I’m not sure how you are using it. It’s time for you to share a link to a demo or, at least, the source of the page you are working on.
JΛ̊KE
Leave a comment on jakecigar's reply
Hi,
When we have list element containing a comma or commas, comma as list delimiter fails, thus, I attempted to use semicolon or some special character as list delimiter, however, they failed."Invalid or unexpected token".
See the following sample,
var vList = ["An Unmarried Woman";"A Single Man, Top Gun";"Married Couple"; "A Married Couple With Joint Tenancy";"Husband And Wife"];
function split( val ) {
return val.split( /;\s*/ );
}
How can we solved this list delimiter issue with autocomplete?
Thanks.
var vList = ["An Unmarried Woman", "A Single Man, Top Gun" , "Married Couple", "A Married Couple With Joint Tenancy", "Husband And Wife"];
OR
var vList = "An Unmarried Woman;A Single Man, Top Gun;Married Couple;A Married Couple With Joint Tenancy;Husband And Wife".split(";");
One is array assignment, and the other uses a string that is split to create the array.
JΛ̊KE
Leave a comment on angryman45's reply
The second method works well. Thanks Jake.
Odd. I already posted a response to your recent post, but it didn't show up on the forum, thus re-posting.
Leave a comment on angryman45's reply
You keep making-up your own Javascript syntax. If you want to do that, you have to write your own browser! ;)
Lists are separated by commas. There are no options. Only commas.
.split() works on strings. It makes an array from parts of a string. It does NOT work on arrays.
It is perfectly OK to use commas inside strings that are part of a list. Show us an example that fails for you. Did it, in fact, fail for you? Or did you make an incorrect assumption that you cannot use commas inside strings in a list? TRY IT.
You still have not shown us anything but bits and pieces. Please post a link to a page on your site, or make a demo page with jsFiddle. It's hard to help with just bits and pieces.
Leave a comment on watusiware's reply
The forum seems to have problems from time to time. It happens to all of us!
JΛ̊KE
Leave a comment on jakecigar's reply
There is something critical you are not showing us. But we can't guess from bits and pieces.
Jake's first version works as well.
var vList = ["An Unmarried Woman", "A Single Man, Top Gun" , "Married Couple", "A Married Couple With Joint Tenancy", "Husband And Wife"];
Is this sample data, and your real data is different?
Do you have QUOTATION MARKS in any of your strings?
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to angryman45's question
{"z7664639":[14737000007214895,14737000007214917,14737000007218013,14737000007218015],"z19995377":[14737000007216408,14737000007216415,14737000007216417,14737000007215943,14737000007215947,14737000007217055,14737000007217133,14737000007216945],"z2950240":[14737000007215483,14737000007215495,14737000007215945,14737000007215949,14737000007215979,14737000007217057,14737000007217137,14737000007217157]}