Dual function textbox question

Background to my question…

My textbox wll have a placeholder of ‘Enter region city zipcode’ (for example), and when typed into, the form will send off by ajax, to a php script that will query the db for results that match whats been typed into the textbox - probably from when I enter the 3rd character. So, as I enter ‘Bro’ it looks up and shows a list beneath the text box with Brooklyn and others in it.

Next, I click on one of them (say Brooklyn), to put it into the textbox.

The placeholder must remain in the textbox after the names which have been entered.

Next, I may enter ‘por’ and when I click one of the results listed beneath textbox, - portsmouth, portland etc I want that selection to be added to whatever is already in the textbox.

So this means we now have Brooklyn, Portland in the textbox followed by the placeholder.

As I CLICK on ‘Portland’ (or any new list-item, to put it into the textbox (alongside Brooklyn and other previously entered items), I also want ajax to fire again and to query the db for both Brooklyn and Portland so the resultset can be displayed in the main body of the page to include places in those two cities only.

I haven’t been able yet to identify effective search terms to find the latter parts of my requirement so progress is verrrry slow.

Q1. My first issue is the lookup of names in my database for display in the list beneath the textbox. My working version of that looksup after the fourth letter but the rest is imperfect given that the php query script puts the items into the textbox. I think it should be the main calling script that does that once the results are returned. Would that be a better structure - where the calling script manipulates the results rather than the querying script?

Q2. I need help to cause a 2nd (separate) lookup which will be triggered when we select the item from the drop down. That click should add the item to the textbox as well as firing off through ajax to get the full resultset for display in the main body of the page.
Each item entered to the textbox should be accompanied with the ‘x’ which if clicked, will remove that item.

I’ve seen similar in real estate websites where the cities entered look like they’re in boxes within the textbox and they have the little ‘x’ beside them so they can be deleted. I want to add that function as well however, I don’t plagiarise others work so would like to build my own - unless anyone knows where I can obtain a legit code which would be licensed for my use.

Any assistance you may offer, or tips regarding search terms that may help find close to what I am looking for , would be very welcome.

I’ll post code if any of you would prefer to help me build it rather than providing good search terms or licensed versions .

The following sites should give you a visual idea of what I am trying to achieve.
https:// www dot dhalia dot com/buy/ - try entering ‘sliema’ first, clicking on it to put it into the box and then start to type ‘valletta’ to see it come up beneath the textbox. click on it to add it to the textbox content

That represents part of my task. I want also to be able to remove sliema with a single click and also, to retain the placeholder after the two areas in the textbox

I have found something fully similar at www dot property news dot com.
when you get there, search for ‘malone park’ and select the closest match (2nd in streets list), to see it added to the searchbox with a delete button.

In essence, that’s what I am trying to achieve.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.