Clojure：Clojure/CompojureでJqueryを使用して検索候補機能を実装する方法

jqueryを使用して検索候補ボックスまたは自動完成ボックスを作成する方法と戦っていますが、これはまだ動作していません。Clojure：Clojure/CompojureでJqueryを使用して検索候補機能を実装する方法

私routes.homeで

私はget-client-list 出力からの出力としての私のlistを見ることができ、以下の持っているが{:id 2, :name "foobar"}

(defn get-list! [{:keys [params]}] 
    (log/infof "Pulling client list from db" params) 
    (let [list (into {} (db/get-client-list params))] 

    ;;list is like hugsql 
    (log/infof "List of names -> [%s]" list) 
    (if (empty? list) 
     (log/errorf "No record found [%s]" list) 
     (do 
     (log/infof "The list is ->[%s]" list) 

     ;; seems am missing something here, dont know 
     ;;code for readlist.html is still far below 
     (layout/render "readlist.html" (:records list)))))) 


(defn about-page [{:keys [flash]}] 
    (layout/render "home.html" 
    (merge nil (select-keys flash [:name :amount :value :er :errors])))) 


(defroutes home-routes 
    (GET "/getinfo" {:keys [headers params body] :as request} 
     (do 
      (if (empty? (:user (:session request))) 
      (do 
       (log/info "Unauthorised attempt to /getinfo URL:" request) 
       (response/found "/")) 
      (about-page request)))) 
    (POST "/getinfo" request 
      (if (empty? (:user (:session request))) 
      (do 
       (log/info "Unauthorised attempt to /getinfo URL:" request) 
       (response/found "/")) 
      (msg! request))) 

    (GET "/clientlist" request (get-list! request)))

マイhome.htmlのようなものです

私base.htmlでその後3210

、 iはreadlist.htmlコードが

{% for item in records %} 
<li onClick="selectList('{{item.name|join}}');"> 
    {{item.name|join}} 
</li> 
{% endfor %}

アシストしてください下にある

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> 
    <script> 
     $(document).ready(function(){ 
      $("#search-box").keyup(function(){ 
       $.ajax({ 
        type: "GET", 

        //calling this URL in route.home 
        // why are you not working? 
        url: "/clientlist", 
        data:'keyword='+$(this).val(), 
        beforeSend: function(){ 
         $("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px"); 
        }, 
        success: function(data){ 
         $("#suggestion-box").show(); 
         $("#suggestion-box").html(data); 
         $("#search-box").css("background","#FFF"); 
        } 
       }); 
      }); 
     }); 

     function selectList(val) { 
      $("#search-box").val(val); 
      $("#suggestion-box").hide(); 
     } 
    </script>

が<head>以内にこのスクリプトを置き、それを理解しようとしている時間を費やし。ありがとう

出典

2017-03-24 user7764270

あなたのコードから、私の問題は、提案が出てこないということです。つまり、/clientlistはそれが想定していたことをしていません。あなたの.jsスクリプトは、それは問題がその粗製物、これを試してみてくださいが、動作します/clientlist

であると思われるので、あなたはあなたのreadlist.htmlはその後に

(defn process-url-encoded 
"parses the url sent from the .js function" 
    [req] 
    (let [input (or (:query-string req) (:input-string req))] 
    (let [input-vec (apply hash-map (str/split input #"[&=]"))] 
     (walk/keywordize-keys input-vec)))) 


(defn get-list! [req] 
    (log/infof "Request sent from .js function") 
    (try 
    (let [{keyword  :keyword} (process-url-encoded req) 
      keywd (str "%" keyword "%") 
      param (hash-map :name-like keywd) 
      list (into {} (db/get-client-list param))] 
      (log/infof "The list is -> %s" list) 
      (layout/render "readlist.html" {:record list})) 
    (catch Exception e 
     (log/errorf "No value supplied -> %s" (.getMessage e)) 
     (layout/render "readlist.html" {:record {}}))))

をすべき構築することにより、それを簡単にすることができます罰金ですあなたはClojureのテンプレートを使用しているので、その可能性は、そのhugsql構文に基づいて、これはappropiate

012である必要があり、また、この

<ul id="need-to-style-this-section"> 

    <li onClick="selectList('{{record.name}}');"> 
     <!-- name should be your database column name--> 
     {{record.name}} 
    </li> 
</ul>

を持っています

楽しんでください！

出典

2017-03-25 13:27:16

ありがとうございました – user7764270

Clojure：Clojure/CompojureでJqueryを使用して検索候補機能を実装する方法

答えて

関連する問題