Link Swap same page

[Maken]

Hi all, New to DD, the Forum and coding. Love the examples I have found on this site. You guys make it very clear how it looks and how to use them!

Can the following example be done with a combination of .js .css .html? I'm familiar with HTML but get lost when trying wrap head around js and css in conjunction with it. Because of this, I don't have any code to offer for what I have tried. Plus, I don't think anyone has ever done this one.
IF it is possible, I would like to have help building a code for the following example.

Example: Using Recipe (ingredients list) for this:

First, let's pretend that (some) items in the ingredients list are "changeable" if I want them to be, and can be "typed over" via some kind of search box that is in-line on the ingredients list. Of course, typing in the search box invokes a drop-down menu.

Let's pretend also that the ingredients have specific text-affiliate-Ad-links next to each item in the list.
So the search box would be in-line AS the ingredient next to the ad it represents. To look something like this.

Hope the image does justice so you can see the word chocolate grayed out in the search box...
Ingredients:
1 cup Flour Pillsbury Best All Purpose Flour, 5 lb. by J.M. Smucker Company $11.69
2 cups 5980 Nestle Semi-Sweet Baking Chips, 20 oz. $4.94
2 cups Sugar Pure Cane Sugar, 4 Lb by Great Value $3.96
3 cups etc. And so on $0.00

--The visitor sees that she can change the items (if I allow it to be changeable) in the search box.
--She decides that she wants mint baking chips instead of semi-sweet baking chips.

Visitor types into the search box, over the word "chocolate chips" with the word "mint."
1. As she types into the search box, auto complete searches and returns various text items like these:
5981 Nestle Semi-Sweet Baking Chips, 20 oz. $4.94
mini mint chips
green mint chips
creme mint chips
etc.

2. She then selects one of the items. and the new choice ingredient swaps with the original semi-sweet chocolate chips.
3. The new selected item should then (somehow) invoke the appropriate affiliate link for that item to appear next to the ingredient, swapping with the original link. Like this...
2 cups 5981 Mint Chocolate Chips - 1 Lb by Clasen $10.99

The recipe now shows the new item selected, along with the new Affiliate Text Ad next to it, of which she can click to purchase if she chooses.
NOTE: the grayed out word in the text box "chocolate chips" actually changes also. and now shows the word "mint chips." So if the visitor changes mind, and types in say "butterscotch" the the search box remains "butterscotch." The reason I would want this is that if the user wanted to later print the recipe, the specific word they chose would show on the print.

So the ingredient list was:
--------------------------------------------------------------------------------------------
Ingredients:
1 cup Flour Pillsbury Best All Purpose Flour, 5 lb. by J.M. Smucker Company $11.69
2 cups 5980 Nestle Semi-Sweet Baking Chips, 20 oz. $4.94
2 cups Sugar Pure Cane Sugar, 4 Lb by Great Value $3.96
3 cups etc. And so on $0.00
--------------------------------------------------------------------------------------------
NOW looks like this:
--------------------------------------------------------------------------------------------
Ingredients:
1 cup Flour Pillsbury Best All Purpose Flour, 5 lb. by J.M. Smucker Company $11.69
2 cups 5981 Mint Chocolate Chips - 1 Lb by Clasen $10.99
2 cups Sugar Pure Cane Sugar, 4 Lb by Great Value $3.96
3 cups etc. And so on $0.00
--------------------------------------------------------------------------------------------

Originally I thought it made sense to put all affiliate-Ad-links on a specific web-page, then simply link to them because they are html code for each link and the only way I could see the words, was to make the web-page house the links... I wonder though if the Ad Links can be part of the code... If I need to put them into the code manually that's fine, because I hand select what I want the user to see anyway.

There are areas in my pages where I would like to be able to apply the concept to but don't want it everywhere.. ie as the example is above, I might have the search box in place of more than one item.
With that said, I wonder also how the word "Mint Chips" could stay that way (grayed out in the search box) once the type-over happens within the original "chocolate chips" (grayed out word in search box)

It doesn't matter if the end results requires one or more steps on my part as long as the user only has to search and select once from the search box drop-down menu.

Also as far as the search box and the Ad Links go, they can be all in one if need be.

Any thoughts, questions, or help appreciated
All the best

[Maken]

I am wondering if my original post was too far out there... thinking the concept is perhaps not even a possibility. Either that or need to use a better comprehensive example.

If the original post is not as clear as it should have been, my Google searches brought me to this DD page example (http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm).

So, I should have first asked, Is it possible to perform something similar...
1. With manually entered text-Ad-links into js/css?
OR,
2. To call a search of a SINGLE (no-index/no-follow) page on my site which houses text-links? <-not sure about this one.

Anyway, Reason:
To have the ability to show A Drop-Down-Box for all available search items (I manually put in place) as per what is typed into the box by the user, so it looks like this...
5984

3. The original post was then asking, to take the choice made by the user, and making it stick to the content somehow. This would enable the user to continue to see their choice rather than my published choice.

Does that make sense?

So, in case the original request can not be done, I would settle for help figuring out how to add one of those two ways (listed above) to the following code, so that it performs like the image example. This way, at least the user could click their choice and a new page would open to the given site in which the link points to.

The following code (animated box) at w3 schools, but I am stumped on how to get the rest of the concept added in.
Any help much appreciated

***HTML search code:

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 330px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>

<p>Animated search form:</p>

<form>
<input type="text" name="search" placeholder="Type Your Favorite baking chips">
</form>

</body>

[Maken]

Okay so I found a closer match to my quest for an auto fill search.
This html will find and select from a pre-populated list of values as the visitor types.
What I would like to see the following html do, as I have discussed earlier, find a way to reference Text-Ad-links via css (text files? i think) instead of having a pre-populated list. In hopes of searching all text-link files for each affiliate program.
Again, I am not good at this so I don't know if text files are the same as CSS in this regard. What ever keeps this code at client-side (i.e. javascript) and the ability to make additional files to search..., I'm all for it.

Thanks you guys.

here's the html


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
<body>

<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>


</body>
</html>