{"id":2583,"date":"2022-04-22T23:17:32","date_gmt":"2022-04-22T20:17:32","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=2583"},"modified":"2022-04-22T23:20:07","modified_gmt":"2022-04-22T20:20:07","slug":"typeahead-js-ile-dinamik-arama-formu-doldurma","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/tr\/2022\/04\/22\/typeahead-js-ile-dinamik-arama-formu-doldurma\/","title":{"rendered":"typeahead.js ile Dinamik Arama Formu Doldurma"},"content":{"rendered":"\n

Arama giri\u015f alan\u0131n\u0131 tasarlarken, kullan\u0131c\u0131 deneyimlerini iyile\u015ftirmek i\u00e7in kullan\u0131c\u0131n\u0131n girdi\u011fi metne dayal\u0131 olarak ipu\u00e7lar\u0131n\u0131 veya olas\u0131 se\u00e7eneklerin bir listesini g\u00f6stermek \u00f6nemlidir.<\/p>\n\n\n\n

Bu yaz\u0131mda size bu durumu html dosyas\u0131 ile nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 g\u00f6sterece\u011fim. A\u015fa\u011f\u0131daki html dosyas\u0131n\u0131 incelerseniz typeahead.js<\/strong> \u00f6rne\u011fini bulabilirsiniz. Bu \u00f6rnekte, baz\u0131 iyile\u015ftirmeler yap\u0131lm\u0131\u015ft\u0131r.<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Typeahed<\/title>\n    <style>\n        .tt-query, \/* UPDATE: newer versions use tt-input instead of tt-query *\/\n        .tt-hint, .tt-input {\n            width: 396px;\n            height: 30px;\n            padding: 8px 12px;\n            font-size: 24px;\n            line-height: 30px;\n            border: 2px solid #ccc;\n            border-radius: 8px;\n            outline: none;\n        }\n        \n        .tt-query { \/* UPDATE: newer versions use tt-input instead of tt-query *\/\n            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n        }\n        \n        .tt-hint {\n            color: #999;\n        }\n        \n        .tt-menu { \/* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu *\/\n            width: 422px;\n            margin-top: 12px;\n            padding: 8px 0;\n            background-color: #fff;\n            border: 1px solid #ccc;\n            border: 1px solid rgba(0, 0, 0, 0.2);\n            border-radius: 8px;\n            box-shadow: 0 5px 10px rgba(0,0,0,.2);\n        }\n        \n        .tt-suggestion {\n            padding: 3px 20px;\n            font-size: 18px;\n            line-height: 24px;\n            cursor: pointer;\n        }\n        \n        .tt-suggestion:hover {\n            color: #f0f0f0;\n            background-color: #0097cf;\n        }\n        \n        .tt-suggestion p {\n            margin: 0;\n        }\n        .twitter-typeahead{\n            display: block !important;\n        }\n        <\/style> \n        \n<\/head>\n<body>\n    <div id="the-basics">\n        <input class="typeahead border bg-white rounded-pill" type="text" placeholder="Choose State">\n    <\/div>\n\n    <script src="https:\/\/code.jquery.com\/jquery-2.2.4.min.js"><\/script>\n    <script src="https:\/\/cdn.rawgit.com\/julmot\/mark.js\/6.1.0\/dist\/jquery.mark.min.js"><\/script>\n    <script src="https:\/\/cdn.rawgit.com\/twitter\/typeahead.js\/v0.11.1\/dist\/typeahead.bundle.min.js"><\/script>\n\n        <script>\n            $(document).ready(function() {\n                var substringMatcher = function(strs) {\n\n            \/\/ console.log('strs', strs);\n            return function findMatches(q, cb) {\n                \/\/ console.log('q', q);\n                var matches, substringRegex;\n\n                \/\/ an array that will be populated with substring matches\n                matches = [];\n                console.log('matches', matches);\n\n                \/\/ regex used to determine if a string contains the substring `q`\n                substrRegex = new RegExp('^' + q, 'i');\n\n                \/\/ iterate through the pool of strings and for any string that\n                \/\/ contains the substring `q`, add it to the `matches` array\n                $.each(strs, function(i, str) {\n                if (substrRegex.test(str)) {\n                    matches.push(str);\n                }\n                });\n                \n                \/\/ console.log('matches', matches);\n                cb(matches);\n            };\n            };\n\n            var states = ['Alabama', 'Alaska', '\u00c7evre M\u00fchendisli\u011fi', 'Arkansas', 'California',\n            'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',\n            'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',\n            'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',\n            'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',\n            'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',\n            'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',\n            'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',\n            'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'\n            ];\n\n            $('#the-basics .typeahead').typeahead({\n                hint: true,\n                highlight: true,\n                minLength: 1\n                },\n                {\n                name: 'states',\n                source: substringMatcher(states)\n            }).bind('typeahead:selected', function (obj, datum) {\n            console.log(obj, datum);\n            });\n        });\n    <\/script>\n\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
\"\"
typeahead \u00f6rne\u011fi<\/figcaption><\/figure><\/div>\n\n\n\n
Ba\u015far\u0131lar<\/p>\n","protected":false},"excerpt":{"rendered":"
Arama giri\u015f alan\u0131n\u0131 tasarlarken, kullan\u0131c\u0131 deneyimlerini iyile\u015ftirmek i\u00e7in kullan\u0131c\u0131n\u0131n girdi\u011fi metne dayal\u0131 olarak ipu\u00e7lar\u0131n\u0131 veya olas\u0131 se\u00e7eneklerin bir listesini g\u00f6stermek \u00f6nemlidir. Bu yaz\u0131mda size bu durumu html dosyas\u0131 ile nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 g\u00f6sterece\u011fim. A\u015fa\u011f\u0131daki html dosyas\u0131n\u0131 incelerseniz typeahead.js \u00f6rne\u011fini bulabilirsiniz. Bu \u00f6rnekte, baz\u0131 iyile\u015ftirmeler yap\u0131lm\u0131\u015ft\u0131r. Ba\u015far\u0131lar<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[52],"tags":[],"yoast_head":"\ntypeahead.js ile Dinamik Arama Formu Doldurma - blog website<\/title>\n<meta name=\"description\" content=\"Arama giri\u015f alan\u0131n\u0131 tasarlarken, kullan\u0131c\u0131 deneyimlerini iyile\u015ftirmek i\u00e7in kullan\u0131c\u0131n\u0131n girdi\u011fi metne dayal\u0131 olarak ipu\u00e7lar\u0131n\u0131 veya olas\u0131 se\u00e7eneklerin bir listesini g\u00f6stermek \u00f6nemlidir.Bu yaz\u0131mda size bu durumu html dosyas\u0131 ile nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 g\u00f6sterece\u011fim. A\u015fa\u011f\u0131daki html dosyas\u0131n\u0131 incelerseniz typeahead.js \u00f6rne\u011fini bulabilirsiniz. Bu \u00f6rnekte, baz\u0131 iyile\u015ftirmeler yap\u0131lm\u0131\u015ft\u0131r.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2022\/04\/22\/typeahead-js-ile-dinamik-arama-formu-doldurma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"typeahead.js ile Dinamik Arama Formu Doldurma - blog website\" \/>\n<meta property=\"og:description\" content=\"Arama giri\u015f alan\u0131n\u0131 tasarlarken, kullan\u0131c\u0131 deneyimlerini iyile\u015ftirmek i\u00e7in kullan\u0131c\u0131n\u0131n girdi\u011fi metne dayal\u0131 olarak ipu\u00e7lar\u0131n\u0131 veya olas\u0131 se\u00e7eneklerin bir listesini g\u00f6stermek \u00f6nemlidir.Bu yaz\u0131mda size bu durumu html dosyas\u0131 ile nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 g\u00f6sterece\u011fim. A\u015fa\u011f\u0131daki html dosyas\u0131n\u0131 incelerseniz typeahead.js \u00f6rne\u011fini bulabilirsiniz. Bu \u00f6rnekte, baz\u0131 iyile\u015ftirmeler yap\u0131lm\u0131\u015ft\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2022\/04\/22\/typeahead-js-ile-dinamik-arama-formu-doldurma\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-22T20:17:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-22T20:20:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2022\/04\/image.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2022\/04\/22\/typeahead-js-ile-dinamik-arama-formu-doldurma\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2022\/04\/image.png\",\"contentUrl\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2022\/04\/image.png\",\"width\":740,\"height\":498},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2022\/04\/22\/typeahead-js-ile-dinamik-arama-formu-doldurma\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2022\/04\/22\/typeahead-js-ile-dinamik-arama-formu-doldurma\/\",\"name\":\"typeahead.js ile Dinamik Arama Formu Doldurma - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2022\/04\/22\/typeahead-js-ile-dinamik-arama-formu-doldurma\/#primaryimage\"},\"datePublished\":\"2022-04-22T20:17:32+00:00\",\"dateModified\":\"2022-04-22T20:20:07+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"Arama giri\\u015f alan\\u0131n\\u0131 tasarlarken, kullan\\u0131c\\u0131 deneyimlerini iyile\\u015ftirmek i\\u00e7in kullan\\u0131c\\u0131n\\u0131n girdi\\u011fi metne dayal\\u0131 olarak ipu\\u00e7lar\\u0131n\\u0131 veya olas\\u0131 se\\u00e7eneklerin bir listesini g\\u00f6stermek \\u00f6nemlidir.Bu yaz\\u0131mda size bu durumu html dosyas\\u0131 ile nas\\u0131l uygulayaca\\u011f\\u0131n\\u0131z\\u0131 g\\u00f6sterece\\u011fim. A\\u015fa\\u011f\\u0131daki html dosyas\\u0131n\\u0131 incelerseniz typeahead.js \\u00f6rne\\u011fini bulabilirsiniz. Bu \\u00f6rnekte, baz\\u0131 iyile\\u015ftirmeler yap\\u0131lm\\u0131\\u015ft\\u0131r.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2022\/04\/22\/typeahead-js-ile-dinamik-arama-formu-doldurma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2022\/04\/22\/typeahead-js-ile-dinamik-arama-formu-doldurma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2022\/04\/22\/typeahead-js-ile-dinamik-arama-formu-doldurma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"typeahead.js ile Dinamik Arama Formu Doldurma\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2583"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=2583"}],"version-history":[{"count":3,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2583\/revisions"}],"predecessor-version":[{"id":2586,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2583\/revisions\/2586"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=2583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=2583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=2583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}